这样的一个表格如何隐藏显示指定的行,麻烦大家了..
<table width= "300 " border= "2 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 1 </td>
<td width= "100 "> 显示 </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 1 </td>
<td width= "100 "> 显示 </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 1 </td>
<td width= "100 "> 显示 </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
</table>
我要的效果是点击a和1旁边的显示时则显示所有a和2的行,再点击一下则隐藏有a和2的行,点有b和1旁边的显示时则显示所有b和2的行,再点击一下则隐藏有b和2的行
[解决办法]
<html>
<head>
<title> </title>
<script language= "JavaScript ">
// td: 当前控制对象
// n: 控制行数
function A(td, n)
{
var newStatus;
if(td.innerText == "显示 ")
{
td.innerText = "隐藏 ";
newStatus = " ";
}
else
{
td.innerText = "显示 ";
newStatus = "none ";
}
var table = td.parentNode.parentNode.parentNode;
var tr = td.parentNode;
for(var i = tr.rowIndex + 1; i <= tr.rowIndex + n; i++)
{
table.rows[i].style.display = newStatus;
}
}
</script>
</head>
<body>
<table width= "300 " border= "2 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick= "A(this,2) "> 隐藏 </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick= "A(this,1) "> 隐藏 </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick= "A(this,2) "> 隐藏 </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
</table>
</body>
</html>
[解决办法]
<table width= "300 " border= "2 " cellspacing= "0 " cellpadding= "0 " id= "table1 ">
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick=show( 'a ')> 显示 </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> a </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick=show( 'b ')> 显示 </td>
</tr>
<tr>
<td width= "100 "> b </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 1 </td>
<td width= "100 " onclick=show( 'c ')> 显示 </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
<tr>
<td width= "100 "> c </td>
<td width= "100 "> 2 </td>
<td width= "100 "> </td>
</tr>
</table>
<script language=javascript>
function show(str)
{
var objs=document.getElementById( "table1 ").childNodes[0].childNodes
for(var i=0;i <objs.length;i++)
{
if(objs[i].childNodes[0].innerText==str)
{
objs[i].style.display= ' '
}
else
{
if(objs[i].childNodes[1].innerText== '1 ')
{
objs[i].style.display= ' '
}
else
{
objs[i].style.display= 'none '
}
}
}
}
</script>
