javaScript和table生成可折叠的菜单

Posted on 2007-04-29 00:22 dodo.loveme 阅读(1565) 评论(0)  编辑  收藏
先生成一个table。点击<thead>部分的话，<tbody>会消失


<table width="175" border="0" id="table1" cellspacing="2">
    <thead>
        <tr>
            <th><acronym style="cursor: hand; " title="在此可以查询本周具体的采购清单项目">采购管理</acronym></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="odd">－<a href="http://localhost:8080/Hotel/purchaseExamine.jsp" target="main">采购作业</a></td>
        </tr>
        <tr>
            <td>－<a href="http://purchaseExamine.jsp" target="main">采购签核作业</a></td>
        </tr>
        <tr>
            <td class="odd">－采购单打印</td>
        </tr>
        <tr>
            <td>－采购预计一览表</td>
        </tr>
    </tbody>
</table>
<table width="175" border="0" id="table1">
    <thead>
        <tr>
            <th><acronym style="cursor: hand; " title="在此可以查询本周具体的采购清单项目">采购管理</acronym></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="odd">－采购作业</td>
        </tr>
        <tr>
            <td>－采购签核作业</td>
        </tr>
        <tr>
            <td class="odd">－采购单打印</td>
        </tr>
        <tr>
            <td>－采购预计一览表</td>
        </tr>
    </tbody>
</table>
<table width="175" border="0" id="table1">
    <thead>
        <tr>
            <th><acronym style="cursor: hand; " title="在此可以查询本周具体的采购清单项目">采购管理</acronym></th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="odd">－采购作业</td>

        </tr>
        <tr>
            <td>－采购签核作业</td>

        </tr>
        <tr>
            <td class="odd">－采购单打印</td>

        </tr>
        <tr>
            <td>－采购预计一览表</td>

        </tr>
    </tbody>
</table>
<table width="175" border="0" id="table2">
    <thead>
        <tr>
            <th><acronym style="cursor: hand; " title="在此可以查询本周具体的采购清单项目">采购管理</acronym></th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="odd">－采购作业</td>

        </tr>
        <tr>
            <td>－采购签核作业</td>

        </tr>
        <tr>
            <td>－采购单打印</td>

        </tr>
        <tr>
            <td>－采购预计一览表</td>

        </tr>
    </tbody>
</table>


接下来是javaScript代码

 function collapse(){
       
   
       var thead = document.getElementsByTagName("thead");
    
    for(var i=0;i<thead.length;i++){
        
    
        thead[i].onclick= function(){
            var tbody = this.parentNode.getElementsByTagName("tbody");
//thead的父节点是table
            if(tbody[0].style.display =="")
            tbody[0].style.display="none";            
            else
            tbody[0].style.display="";
        }
       }
    var tbody = document.getElementsByTagName("tbody");
//初始化，让所有的tbody都关闭
    for(var i=0;i<tbody.length;i++){
        
        
        tbody[i].style.display="none";
    
    }
    }

window.onload = collapse;


只有注册用户登录后才能发表评论。
网站导航: