用JavaScript+DIV打造层叠明细表

转载 2006年06月23日 14:12:00
如果您对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的方式实现明细表简单而高效,界面效果也很容易让用户接受。
 
    点击下圖观看詳細效果,欢迎各位指正。
點擊看大圖...

用JavaScript+DIV打造层叠明细表javascript

用javascript+div打造层叠明细表 用javascript+div打造层叠明细表 引言: 大家可能都用过access吧,对里面master/detail数据浏览时的层叠缩放样式有没有印...

DIV+CSS(WEB标准)精通CSS层叠样式表

  • 2011年04月27日 11:52
  • 6.84MB
  • 下载

XHTML、CSS与javascript入门经典_第七章 层叠样式表

CSS规则组成 CSS控制文本外观 CSS如何基于Box Model 7.1CSS简介     CSS规则:         1.选择器:指定声明应用于哪个或那些元素(不同元素之...

DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。  重叠样式需要主要CSS样式解释  1、z-index 重叠顺序属性  2、position:relative和...

DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

DIV重叠 CSS让DIV层叠、叠加,CSS让两个DIV或多个DIV按顺序重叠叠加篇 让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1...

css div重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left righ...

网页弹出div层的js-javascript

  • 2012年04月09日 10:48
  • 2KB
  • 下载

JavaScript实现同一页面不同div的切换及颜色改变

类似于csdn个人信息页面,先上图刚进入页面后,“我的相册”对应的区块会显示深红色,并且会显示相应的div内容。然后当我们点击“我的关系后”,“我的关系”的背景色变成深红色,其他导航背景色是灰色,并且...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JavaScript+DIV打造层叠明细表
举报原因:
原因补充:

(最多只允许输入30个字)