用JavaScript+DIV打造层叠明细表

用JavaScript+DIV打造层叠明细表

引言：

        大家可能都用过Access吧，对里面Master/Detail数据浏览时的层叠缩放样式有没有印象？当点击主项是即会在此项下显示明细表的相关资料，这样是不是很方便和直观呢？那么，有没有兴趣自己也来做一个这样的界面呢？接下来我将会用javascript技法结合ASP描述带您一起来实现。

---

    如果您对HTML比较熟悉的话，相信您对其中的DIV定位标记一定不会陌生吧？其实明细表就是一个隐藏的DIV，它其实是在一开始就存在的，只不过被隐藏了而已。当我们点击主表中的某个特定标志的时候，就通过某个事件（如click）将它的状态置为显示就可以了。

        好了，原理您已经清楚了，那么到底如何实现呢？接下来我们先设计好表格，从上面我们知道，首先应该设计好主表的表格，并且明细表的表格应该是包含在主表的某个单元格中的，这样才能达到很好的效果。而建立表格的代码，应该是包含在循环读出数据表中多个记录的过程中的，不然就没有意议了。在显示主表记录的时候，我们应该创建一个DIV标记（每个标记都应该有个唯一的id标识），用以响应事件，如：

        <%
    j=1
    do while not rs.eof
    %>
        <tr>
        '定义一个id为main1、main2序列的DIV标记
        <div id="main"<%=j%>class=“menu” width=“100%” >
            '让编号响应单击事件
          <td height=“22”><a href=# title=“点击这里展开/折叠” onclick=“expandIt(" &j& ");return false”><%=rs("id")%></a></td> 
        </div>
        '……
        </tr>
    <%
        j=j+1
        rs.movenext
    loop
    %>

    每显示完一条主表记录，我们就应该读取相关的明细表记录，并且用另一个DIV标记把所有相关的明细记录循环显示并包含起来。结合上面的过程，我们有了以下语句：

         do while not rs.eof
        <tr>
        “定义一个id为main1、main2序列，class为menu的DIV标记
        <div id=“main" &j& "“ class=“menu” width=“100%” >
            '让编号响应单击事件
          <td height=“22”><a href=# title=“点击这里展开/折叠” onclick=“expandIt(" &j& ");return false”><%=rs("id")%></a></td> 
        </div>
        “……
        </tr>
    <tr><td>
            '定义一个id为page1、page2序列，class为child的DIV标记
        <div id=“page" &j& "“ class=“child”>        
            <table border=“1” width=“100%” >
                '在这里循环读取明细表记录    
            </table>
        </div>        
    </td></tr>
        j=j+1
        rs.movenext
    loop

    设计好了DIV标记和表格显示页面后，接下来就用Javascript来设计响应事件语句，以达到页面一开始就全部隐藏，单击其中一个ID只显示相关的明细记录而隐藏其它无关的明细记录的目的。

function initIt(){
        divCount = document.all.tags("DIV");
        for (i=0; i<divCount.length; i++) {
            obj = divCount(i);
            if (obj.className == "child" || obj.className == "child1") obj.style.display = "none";
        }
}

var priorid=1000;
function expandIt(el) {
        divCount = document.all.tags("DIV");
        for (i=0; i<divCount.length; i++) {
            obj = divCount(i);        
            if (obj.className == "child" || obj.className == "child1")
        if (priorid!=el){
            obj.style.display = "none";}    
    }
        priorid=el;
        obj2 = eval("page" + el);
        obj4 = eval("main" + el);
        if (obj2.style.display == "none") {
            
            obj2.style.display = "block";
        }
        else {
            obj2.style.display = "none";
        }
}
onload = initIt;

    以上Javascript的具体语法意思我就不详述的，initIt函数的功能是在页面加载或刷新的时候全部隐藏明细表，expandIt函数的功能是显示相关的明细表而将其它无关的明细表隐藏。

    可以看出，用Javascript+DIV的方式实现明细表简单而高效，界面效果也很容易让用户接受。

 

    点击下圖观看詳細效果，欢迎各位指正。

        文章出處:http://www.cnblogs.com/bonny.wong
        文章作者:上山砍柴去
        寫作時間:2005-03-22