用JavaScript+DIV打造层叠明细表
来源:互联网 发布:安卓手机搭建博客 知乎 编辑:程序博客网 时间:2024/04/28 04:31
如果您对HTML比较熟悉的话,相信您对其中的DIV定位标记一定不会陌生吧?其实明细表就是一个隐藏的DIV,它其实是在一开始就存在的,只不过被隐藏了而已。当我们点击主表中的某个特定标志的时候,就通过某个事件(如click)将它的状态置为显示就可以了。
好了,原理您已经清楚了,那么到底如何实现呢?接下来我们先设计好表格,从上面我们知道,首先应该设计好主表的表格,并且明细表的表格应该是包含在主表的某个单元格中的,这样才能达到很好的效果。而建立表格的代码,应该是包含在循环读出数据表中多个记录的过程中的,不然就没有意议了。在显示主表记录的时候,我们应该创建一个DIV标记(每个标记都应该有个唯一的id标识),用以响应事件,如:
每显示完一条主表记录,我们就应该读取相关的明细表记录,并且用另一个DIV标记把所有相关的明细记录循环显示并包含起来。结合上面的过程,我们有了以下语句:
可以看出,用Javascript+DIV的方式实现明细表简单而高效,界面效果也很容易让用户接受。
好了,原理您已经清楚了,那么到底如何实现呢?接下来我们先设计好表格,从上面我们知道,首先应该设计好主表的表格,并且明细表的表格应该是包含在主表的某个单元格中的,这样才能达到很好的效果。而建立表格的代码,应该是包含在循环读出数据表中多个记录的过程中的,不然就没有意议了。在显示主表记录的时候,我们应该创建一个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
%>
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
<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;
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打造层叠明细表
- 用div实现图层叠加
- 明细表
- 用JavaScript打造搜索工具栏
- 用JavaScript打造搜索工具栏
- 用javascript打造搜索工具栏
- 用JavaScript打造搜索工具栏
- Html中DIV层叠与悬浮
- [DIV/CSS] 元素上下层叠关系总结
- Flash与DIV的层叠顺序问题
- css 不使用定位的 div层叠
- 层叠
- 用Javascript动态填充DIV
- 用javascript拖动DIV层
- DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
- css div重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
- DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
- 计算机中的字符,字节和编码
- 埃里克森的心理社会发展阶段理论
- asp/js函数收藏/代码/JScript[40条]/JS宝典
- 如何配置ASP运行环境
- 浅谈Object Pascal的指针
- 用JavaScript+DIV打造层叠明细表
- 纪年内德维德!
- 当上版主了,记念一下
- STL实践指南
- 以前写的文字——诗歌
- 以前写的文字——诗词
- Eclipse中SWT Designer注册成功
- HP-UX glance正式版
- 使用API获取一个应用是否运行结束的例子