用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 的方式实现明细表简单而高效,界面效果也很容易让用户接受。
 
    点击下圖观看詳細效果,欢迎各位指正。
點擊看大圖...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值