无论是事先写好的，还是动态生成的，要找到指定的tr或td都必须知道其相关的一个属性，未必必须是id或name，然后无论是在一个table还是多个 table都可以通过document.getElementsByTagNames( "tr ")或td，取得集合，……再根据知道的属性再找，最后设置显示/隐藏
方法一：
document.getElementById( "控件ID ").style.visibility= "hidden ";
document.getElementById( "控件ID ").style.visibility= "visible ";
方法二：
document.getElementById( "控件ID ").style.display= "none ";
document.getElementById( "控件ID ").style.display= "inline ";
方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static
方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic
我写的一个根据下拉菜单的不同选择值来显示下边的一个input表单的显示和隐藏
js：
function listchange(){
var sel=document.getElementsByName('tasklist_type');
for(var i=0;i<tasklist_type.options.length;i++)
{
if(tasklist_type.options[i].selected)
{
if(tasklist_type.options[i].value==0){
document.getElementById( "tasklistoriginalno").style.display= "none";
document.getElementById("tasklist_originalno").value = "";
/*上面红色的这句话用处很大的，因为你想隐藏掉下面的一个表单，那么这个表单的值也就不需要写入数据库了，所以记得在隐藏的同时将被隐藏表单的值清空；当然要是你不嫌麻烦的话在表单的数据提交到php的数据处理页面的时候对 tasklist_type根据其值是0还是1来行进判断写不写入 tasklist_originalno 的值 */
}
if(tasklist_type.options[i].value==1){
document.getElementById( "tasklistoriginalno").style.display= "";
}
}
}
}
html：
<tr height='30'>
<td> <{$lang_tasklist_type}>: </td>
<td>
<select name="tasklist_type" id="tasklist_type" οnchange="listchange();return false;">
<option value="null" ><{$lang_tasklist_sel}></option>
<option value="0" ><{$lang_tasklist_common}></option>
<option value="1" ><{$lang_tasklist_supplement}></option>
</select>
</td>
</tr>
<tr height='30' id='tasklistoriginalno'>
<td> <{$lang_tasklist_originalno}>:</td>
<td colspan='3'><input type='text' id='tasklist_originalno' name='tasklist_originalno'/></td>
</tr>
---------------------------------------------------------------------------------------------
上面的代码在IE6和FF下都能成功实现效果，但是在IE8下不能得到相应的效果，原因出在在IE8下用上面的代码无法获取到下拉列表的值，经测试下面的代码可以：
js
function listchange()
{
var sel=document.getElementsByName("tasklist_type")[0].value; //获取下拉表单的value值
if(sel=='0')
{
document.getElementById( "tasklistoriginalno").style.display= "none"; //隐藏id为tasklistoriginalno的td
document.getElementById("tasklist_originalno").value = ""; //并将其值赋为空
}
if(sel=='1')
{
document.getElementById( "tasklistoriginalno").style.display= ""; //当下拉表单的值为0时显示
}
}
下面是测试的例子，也是我在网上看到的，我们将其copy到保存到一个html页面中在IE8下打开，OK：
<!--有表单---->
< %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.areaName.area.options[document.areaName.area.selectedIndex].text;
alert(name);
}
</script>
<body>
<form name="areaName">
<select name="area" οnchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="长沙">长沙</option>
<option value="山西">山西</option>
</select>
</form>
</body>
< /html>
< !---无表单--->
< %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script type="text/javascript">
function optChange(){
var name=document.getElementsByName("area")[0].value;
alert(name);
}
</script>
<body>
<select name="area" οnchange="optChange()">
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="长沙">长沙</option>
<option value="山西">山西</option>
</select>
</body>
< /html
