树型结构显示
在网页上这样显示
代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Tree</title>
<script language="javascript">
function show(IMG,DV)
{
if(DV.style.display=="none") { DV.style.display="block"; IMG.src="images/btnDel.gif"
} else { DV.style.display="none"; IMG.src="images/btnAdd.gif" }}var display="none";var i;function showall(){ var divTags=document.getElementsByTagName("div"); //alert(divTags[10].id.replace("DV","")); if( display=="none" ) { for(i=0;i<divTags.length;i++) { divTags[i].style.display="block"; eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnDel.gif"; display="block" } } else { for(i=0;i<divTags.length;i++) { divTags[i].style.display="none"; eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif"; display="none"; } }
}</script></head><body> <table width="90%" border="1" align="left" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0"> <tr ONCLICK='showall()' align="center" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"> <td width="21%" bgcolor="#EEEEEE">表头</td> <td width="23%">123456</td> <td width="17%" bgcolor="#EEEEEE">其他内容</td> <td width="39%">123456</td> </tr> </table> <p> </p> <table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0"> <tr align="center" ONCLICK="show(IMG001,DV001)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"> <th width="2%" scope="row"><img id="IMG001" src="images/btnAdd.gif"></th> <td width="20%" bgcolor="#EEEEEE">第一层</td> <td width="25%">456789</td> <td width="30%">12</td> <td width="20%">221</td> </tr> </table> <!--Begin of 2--> <DIV id='DV001' style='display:none'> <table style="margin-left: 20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0"> <tr align="center" ONCLICK="show(IMG0010,DV0010)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"> <td width="2%"><img id="IMG0010" src="images/btnAdd.gif"></td> <td width="10%" bgcolor="#EEEEEE"> 第二层</td> <td width="10%" >132</td> <td width="8%">12</td> <td width="20%"> </td> <td width="8%" ></td> <td width="20%" > </td> <td width="10%" ></td> </tr> </table> <!--Begin of 3--> <DIV id="DV0010" style='display:none'> <table style="margin-left: 40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0"> <tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center" ONCLICK='show(IMG00101,DV00101)'> <td width="2%" bgcolor="#eeeeee"><img id="IMG00101" src="images/btnAdd.gif"></td> <td width="10%" bgcolor="#eeeeee">第三层</td> <td width="15%" > </td> <td width="10%" > </td> <td width="10%" > </td> <td width="10%" > </td> <td width="10%" > </td> <td width="10%" > </td> <td width="10%"> </td> </tr> </table> <!--Begin of 4--> <DIV id='DV00101' style='display:none'> <table style="margin-left: 60px;" width="90%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0"> <tr align="center"> <td width="2%" bgcolor="#eeeeee"><img id="IMG001010" src="images/btnDel.gif"></td> <td bgcolor="#eeeeee" width="10%">第四层</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </DIV><!--End of 4--> </DIV><!--End of 3--> </DIV><!--End of 2--></body></html>这里给出的是静态网页,还有没有其他更好的方法?
如果是动态的话,如何去分页?
