紧急求多级多行表格循环显示隐藏效果

Question

一个表格不好解决
最好用多个表格每级都是一个两行的table
第一行显示节点文本（当点击此节点时，显示/隐藏第二行）
第二行内嵌一个table，这个table也是包含两行，这样一直下去。

Answer 1

首先表格里面是可以嵌套表格的另外，我觉得如果你要做这样一个东西，不如考虑div+css来做，用表格显得有些死板。

Answer 2

DIV做跟QQ一样的效果，改变Div高度跟宽度

Answer 3

<table width="200" cellpadding="3" cellspacing="1" id="sTable"> 
  <% 
   for i=0 to 4 
   dim trnum:trnum="tr"&i 
  %> 
  <tr> <td bgcolor="#CCCCCC" id="<%=trnum%>" name="" onclick="_onClieck(this)"><%=trnum%> </td> </tr> 
  <%  
for n=0 to 3 
   dim skdl:skdl=trnum&n 
  %> 
  <tr style="display:none" > <td id="<%=skdl%>" name="<%=trnum%>" onclick="_onClieck(this)"><%=skdl%> </td> </tr> 
  <% 
   for mm=0 to 3 
   dim nnn:nnn="tff"&mm 
  %> 
  <tr style="display:none"> 
   <td  id="<%=nnn%>" bgcolor="#FFCCFF" name="<%=skdl%>" onclick="_onClieck(this)">&nbsp;&nbsp;<%=nnn%> </td> 
  </tr>    
<% 
next 
next 
next 
%> 
</table> 
<script lanuage=javascript>
var objTable = document.getElementById("sTable");
var iRows = objTable.rows.length; function _onClieck(obj)
{
for(var i=0;i<iRows;i++)
{
if(objTable.rows[i].firstChild.name==obj.id)
{
objTable.rows[i].style.display="block";
}
}
}
</script>看看是不是你想要的吧，不过我把onclick 事件写到<td>了。

Answer 4

真是不好意思，刚只做了展开未写收缩，下面这段可以实现展开与收缩了。<table width="200" cellpadding="3" cellspacing="1" id="sTable"> 
  <% 
   for i=0 to 4 
   dim trnum:trnum="tr"&i 
  %> 
  <tr> <td bgcolor="#CCCCCC" id="<%=trnum%>" name="" onclick="_onClieck(this)"><%=trnum%> </td> </tr> 
  <%  
for n=0 to 3 
   dim skdl:skdl=trnum&n 
  %> 
  <tr style="display:none" > <td id="<%=skdl%>" name="<%=trnum%>" onclick="_onClieck(this)"><%=skdl%> </td> </tr> 
  <% 
   for mm=0 to 3 
   dim nnn:nnn="tff"&mm 
  %> 
  <tr style="display:none"> 
   <td  id="<%=nnn%>" bgcolor="#FFCCFF" name="<%=skdl%>" onclick="_onClieck(this)">&nbsp;&nbsp;<%=nnn%> </td> 
  </tr>    
<% 
next 
next 
next 
%> 
</table> 
<script lanuage=javascript>
var objTable = document.getElementById("sTable");
var iRows = objTable.rows.length; function _onClieck(obj)
{
for(var i=0;i<iRows;i++)
{
if(objTable.rows[i].firstChild.name==obj.id)
{
if(objTable.rows[i].style.display=="none")
{
objTable.rows[i].style.display="block";
}
else
{
objTable.rows[i].style.display="none";
}
}
}
}
</script>

Answer 5

gj_diy 太感谢你，我要的就是这个效果嘛。^_^  谢谢！  也谢谢参预回复的朋友们。 

Answer 6

gj_diy 太感谢你，我要的就是这个效果嘛。^_^  谢谢！  也谢谢参预回复的朋友们。 

Answer 7

gj_diy  还有一点问题呢，刚才没有注意看到。三级中点开后，点一级的时候三级不会被隐藏。

Answer 8

已经改好了，你再试试吧。呵呵。。让你久等了
<table width="200" cellpadding="3" cellspacing="1" id="sTable"> 
  <% 
  for i=0 to 4 
  dim trnum:trnum="tr"&i 
  %> 
  <tr> <td bgcolor="#CCCCCC" id=" <%=trnum%>" name="" onclick="_onClieck(this)"> <%=trnum%> </td> </tr> 
  <%  
for n=0 to 3 
  dim skdl:skdl=trnum&n 
  %> 
  <tr style="display:none" > <td id=" <%=skdl%>" name=" <%=trnum%>" onclick="_onClieck(this)"> <%=skdl%> </td> </tr> 
  <% 
  for mm=0 to 3 
  dim nnn:nnn="tff"&mm 
  %> 
  <tr style="display:none"> 
  <td  id=" <%=nnn%>" bgcolor="#FFCCFF" name=" <%=skdl%>" onclick="_onClieck(this)">&nbsp;&nbsp; <%=nnn%> </td> 
  </tr>    
<% 
next 
next 
next 
%> 
</table> 
<script lanuage=javascript> 
var objTable = document.getElementById("sTable"); 
var iRows = objTable.rows.length; function _onClieck(obj) 
{ 
for(var i=0;i <iRows;i++) 
{ 
if(objTable.rows[i].firstChild.name==obj.id) 
{ 
if(objTable.rows[i].style.display=="none") 
{ 
objTable.rows[i].style.display="block"; 
} 
else 
{ 
objTable.rows[i].style.display="none"; 
for(var j=iRows-1;j>i;j--)
{
if(objTable.rows[j].firstChild.name==objTable.rows[i].firstChild.id)
{
objTable.rows[j].style.display="none";
}
}
} 
} 
} 
} 
</script>