实例名称

可以分级的表格隐藏的JS代码

实例描述

分级的表格隐藏是指当用户单击第一行时，第一行后面的行都会隐藏；单击第二行时，则第二行下面的所有行会隐藏，依次类推。

实例代码

htmlheadmeta http-equiv="Content-Language" content="zh-cn"meta http-equiv="Content-Type" content="text/html; charset=gb2312"titleNew Page-学无忧 Language="javascript"function trClickcifc==0 // 如果选择的是第一行if "a1".==""//如果第二行是显示的 "a1".="none";//让第二行不显示else "a1".=""; //让第二行显示if "a1".=="none"//如果第二行不显示 "a11".="none"; //第三行也不显示else "a11".=""; //第三行显示else ifc==1 if "a11".=="" //如果第三行显示 "a11".="none"; //第三行不显示 else "a11".=""; //第三行显示 if "a111".=="" //如果第四行显示 "a111".="none"; //第四行不显示 else "a111".=""; //第四行显示 else ifc==2 if "a111".=="" //如果第四行显示 "a111".="none"; //第四行不显示 else "a111".=""; //第四行显示 --/Script/head

bodydiv align="center"centertable border="0" cellpadding="0" cellspacing="0" width="200" tr id="a0" onclick="trClick0" td height="24" bgcolor="#0000FF"bfont color="#FFFFFF"第一行/font/b/td /tr tr id="a1" onclick="trClick1" td height="24" bgcolor="#FF0000"font color="#FFFFFF"第二行/font/td /tr tr id="a11" onclick="trClick2" 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”的值通过单击事件中的参数传递。

源码下载