javascript巧妙控制表格的显示与隐藏

表格的html代码：

 1 < table  id ="ContentTable" >
 2 < tbody  style ="DISPLAY:block" >
 3 < tr >
 4 < td > 0 </ td >
 5 </ tr >
 6 </ tbody >
 7 < tbody  style ="DISPLAY:none" >
 8 < tr >
 9 < td  align ="left" > 1 </ td >
10 </ tr >
11 </ tbody >
12 < tbody  style ="DISPLAY:none" >
13 < tr >
14 < td  align ="left" > 2 </ td >
15 </ tr >
16 </ tbody >
17 < tbody  style ="DISPLAY:none" >
18 < tr >
19 < td  align ="left" > 3  </ td >
20 </ tr >
21 </ tbody >
22 < tbody  style ="DISPLAY:none" >
23 < tr >
24 < td > 4 </ td >
25 </ tr >
26 </ tbody >
27 </ table >
28

JS函数代码：

 1  < script language = " javascript " >
 2  <!--
 3     function  show(n)
 4    {
 5       for (i = 0 ;i < ContentTable.tBodies.length;i ++ ) 
 6          ContentTable.tBodies[i].style.display = " none " ; 
 7      ContentTable.tBodies[n].style.display = " block " ; 
 8    }
 9 
10  // -->
11  </ script >

JS调用代码：

< a  href ="#"  onclick ="show(0);" > 显示第1行 </ a >

转载于:https://www.cnblogs.com/xinbin/archive/2005/12/05/290884.html