关闭

用JavaScript+DIV打造层叠明细表

1272人阅读 评论(0) 收藏 举报
如果您对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的方式实现明细表简单而高效,界面效果也很容易让用户接受。
 
    点击下圖观看詳細效果,欢迎各位指正。
點擊看大圖...
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:40948次
    • 积分:489
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:31篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论