用JavaScript+DIV打造层叠明细表

如果您对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 的方式实现明细表简单而高效，界面效果也很容易让用户接受。

 

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