用javascript+div打造层叠明细表
用javascript+div打造层叠明细表
引言:
大家可能都用过access吧,对里面master/detail数据浏览时的层叠缩放样式有没有印象?当点击主项是即会在此项下显示明细表的相关资料,这样是不是很方便和直观呢?那么,有没有兴趣自己也来做一个这样的界面呢?接下来我将会用javascript技法结合asp描述带您一起来实现。
如果您对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=“点击这里展开/折叠” οnclick=“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=“点击这里展开/折叠” οnclick=“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; idivcount.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; idivcount.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的方式实现明细表简单而高效,界面效果也很容易让用户接受。
点击下圖观看詳細效果,欢迎各位指正。
文章出處:http://www.cnblogs.com/bonny.wong
文章作者:上山砍柴去
寫作時間:2005-03-22
绿色通道:好文要顶关注我收藏该文与我联系
posted on 2005-03-22 16:16 非诚勿扰2 阅读(5959) 评论(13)编辑 收藏
发表评论
1565282
回复 引用 查看
是技术过时了?还是写得太差?
怎么没人留言呢?
回复 引用
2005-03-23 07:43 | none
如果你仔细看看现在网络上的一些论坛,你发现其实这样的功能大家都已做到了,而且已经是很久远的故事了。
回复 引用 查看
2005-03-23 08:04 | 维生素c.net(范维肖)
'定义一个id为main1、main2序列的div标记
class=“menu” width=“100%” >
不对吧..应该是这样吧:
" class="menu" width="100%">
回复 引用 查看
樓上的很仔細,謝謝。
出現這個問題的原因是因為我本來的代碼是asp格式的,貼在word中編輯後又換成html的,所以有點小問題。
回复 引用 查看
说句题外话,怎么你的blog会弄些activex控件安装,这样很不好!
回复 引用 查看
咦!是呀,我剛剛自己也看到了,可能是我用了“太極鏈”的原因。我把它取消掉再說。
回复 引用 查看
搞得不錯啊
回复 引用
2005-07-15 21:25 | gallon[未注册用户]
哥们, 我想让它一开始显示第一个div如何作
谢谢
回复 引用 查看
回复 引用
2005-07-17 21:43 | gallon[未注册用户]
sorry, 我找到了, 在 initit() 中 写就ok了, 你没测试吧;不过还有一个问题,如何在隐藏或显示后, 能获得 td的高度,
回复 引用
2005-07-21 18:10 | bean_zhw[未注册用户]
很好呀,帮我解决了问题,感谢了 兄弟!!!!!!!!!!!!!
回复 引用
2005-11-07 16:34 | irving[未注册用户]
不错
回复 引用
2009-06-22 17:18 | 为啥[未注册用户]
为啥我看不到右边的 被挡住了
注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。
最新it新闻:
» 更多新闻...
最新知识库文章:
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
