可以分级的表格隐藏的JS代码如何写
【实例名称】
可以分级的表格隐藏的JS代码
【实例描述】
分级的表格隐藏是指当用户单击第一行时，第一行后面的行都会隐藏；单击第二行时，则第二行下面的所有行会隐藏，依次类推。
【实例代码】
<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>New Page-本站（www.xue51.com）</title> <Script Language="javascript"> function trClick(c){ if(c==0){ // 如果选择的是第一行 if (document.all("a1").style.display=="") //如果第二行是显示的 document.all("a1").style.display="none"; //让第二行不显示 else document.all("a1").style.display=""; //让第二行显示 if (document.all("a1").style.display=="none") //如果第二行不显示 document.all("a11").style.display="none"; //第三行也不显示 else document.all("a11").style.display=""; //第三行显示 } else if(c==1){ if (document.all("a11").style.display=="") //如果第三行显示 document.all("a11").style.display="none"; //第三行不显示 else document.all("a11").style.display=""; //第三行显示 if (document.all("a111").style.display=="") //如果第四行显示 document.all("a111").style.display="none"; //第四行不显示 else document.all("a111").style.display=""; //第四行显示 } else if(c==2){ if (document.all("a111").style.display=="") //如果第四行显示 document.all("a111").style.display="none"; //第四行不显示 else document.all("a111").style.display=""; //第四行显示 } } --> </Script> </head>
<body> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="200"> <tr id="a0" onclick="trClick(0)"> <td height="24" bgcolor="#0000FF"><b> <font color="#FFFFFF">第一行</font></b></td> </tr> <tr id="a1" onclick="trClick(1)"> <td height="24" bgcolor="#FF0000"> <font color="#FFFFFF">第二行</font></td> </tr> <tr id="a11" onclick="trClick(2)"> <td height="24" bgcolor="#FFFF00">第三行</td> </tr> <tr id="a111"> <td height="24" bgcolor="#0eeee0">第四行</td> </tr> </table> </center> </div> </body> </html>
【运行效果】
表格的原始效果
单击第二行后的效果
【难点剖析】
本例的重点其实是一系列的“if．．．else if”语句。当单击第一行时，判断第一行后面所有行的显示状态，如果行显示属性“display”为空，则设置为"none",表示不显示该行，否则显示该行。通过“else if'’语句判断用户选择的是第几行，“c”的值通过单击事件中的参数传递。
【源码下载】
如果你不愿复制代码及提高代码准确性，你可以点击：可以分级的表格隐藏 进行本实例源码下载
……