Js问题：如何控制多个层的树

具体代码如下：
<div id=div1 onclick="doclick(this)"><table ><tr><td>1</td><td>1</td></tr></table></div>
<div id=div2 onclick="doclick(this)"><table ><tr><td>2</td><td>2</td></tr></table></div>
<div id=div3 onclick="doclick(this)"><table ><tr><td>3</td><td>2</td></tr></table></div>
<div id=div4 onclick="doclick(this)"><table ><tr><td>4</td><td>3</td></tr></table></div>
<div id=div5 onclick="doclick(this)"><table ><tr><td>5</td><td>1</td></tr></table></div>
<div id=div6 onclick="doclick(this)"><table ><tr><td>6</td><td>2</td></tr></table></div>
<div id=div7 onclick="doclick(this)"><table ><tr><td>7</td><td>3</td></tr></table></div>
<div id=div8 onclick="doclick(this)"><table ><tr><td>8</td><td>3</td></tr></table></div>
<div id=div9 onclick="doclick(this)"><table ><tr><td>9</td><td>1</td></tr></table></div>
<button onClick="resettbl();" name="aaa" id="aaa">还原</button>
<script>
function doclick(obj)
{
    var selTbl = obj.children[0];
var selNum = parseInt(selTbl.rows[0].cells[1].innerText);
    for(var i = 1 ; i < 10 ;i ++)
{
    var curObj    =   document.getElementById("div"+i);
        var curTbl    =   curObj.children[0];
curNum    =   parseInt(curTbl.rows[0].cells[1].innerText);
if(selNum < curNum)
{
     curObj.style.display = "none";
}
}
}
function resettbl()
{
    for(var i = 1 ; i < 10 ;i ++)
{
    obj = document.getElementById("div"+i);
obj.style.display = "block";
}
}
</script>在win2000.iE6.0下测试成功
其實應該是少用table﹐因為table過多得嵌套極度影響閱讀,而且多代碼﹐其實用span,p,div就可很好實現了
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!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>无标题文档</title>
</head><body>
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {
    with (document) {
        write("<STYLE TYPE="text/css">");
        if (NS4) {
            write(".parent {position:absolute; visibility:visible}");
            write(".child {position:absolute; visibility:visible}");
            write(".regular {position:absolute; visibility:visible}")
        }
        else {
            write(".child {display:none}")
        }
        write("</STYLE>");
    }
}function getIndex(el) {
    ind = null;
    for (i=0; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.id == el) {
            ind = i;
            break;
        }
    }
    return ind;
}function arrange() {
    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.visibility != "hide") {
            whichEl.pageY = nextY;
            nextY += whichEl.document.height;
        }
    }
}function initIt(){
    if (!ver4) return;
    if (NS4) {
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
       }
        arrange();
    }
    else {
        divColl = document.all.tags("DIV");
        for (i=0; i<divColl.length; i++) {
            whichEl = divColl(i);
            if (whichEl.className == "child") whichEl.style.display = "none";
        }
    }
}function expandIt(el) {
    if (!ver4) return;
    if (IE4) {
        whichEl = eval(el + "Child");
        if (whichEl.style.display == "none") {
            whichEl.style.display = "block";
        }
        else {
            whichEl.style.display = "none";
        }
    }
    else {
        whichEl = eval("document." + el + "Child");
        if (whichEl.visibility == "hide") {
            whichEl.visibility = "show";
        }
        else {
            whichEl.visibility = "hide";
        }
        arrange();
    }
}
onload = initIt;
</script>
        </font></p>
      <div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB1"); return false" ><img src="img/plus.gif" border=0>文件夹一</a></div>
      <div id="KB1Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif" width="32" height="47"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
      <div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB2"); return false" ><img src="img/plus.gif" border=0>文件夹二</a></div>
      <div id="KB2Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
      <div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB3"); return false" ><img src="img/plus.gif"  border=0>文件夹三</a></div>
      <div id="KB3Child" class="child"> 　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　　<a href="sample.htm" target="_blank" ><img src="img/open.gif"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面三</a></div>
      <script language="JavaScript">
if (NS4) {
        firstEl = "KB1Parent";
        firstInd = getIndex(firstEl);
        arrange();
}
</script></body>
</html>

调试易

Js问题：如何控制多个层的树

解决方案 »