javascript 明细表加单位
2012-01-09 06:16:22 chaoxidawang 阅读数 412

用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=“点击这里展开/折叠” 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; 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-22 20:46 | 上山砍柴去

是技术过时了?还是写得太差?

怎么没人留言呢?

回复 引用

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%">

回复 引用 查看

2005-03-23 08:10 | 上山砍柴去

樓上的很仔細,謝謝。

出現這個問題的原因是因為我本來的代碼是asp格式的,貼在word中編輯後又換成html的,所以有點小問題。

回复 引用 查看

2005-03-23 08:49 | format

说句题外话,怎么你的blog会弄些activex控件安装,这样很不好!

回复 引用 查看

2005-03-23 08:52 | 上山砍柴去

咦!是呀,我剛剛自己也看到了,可能是我用了“太極鏈”的原因。我把它取消掉再說。

回复 引用 查看

2005-03-25 09:03 | james wong

搞得不錯啊

回复 引用

2005-07-15 21:25 | gallon[未注册用户]

哥们, 我想让它一开始显示第一个div如何作

谢谢

回复 引用 查看

2005-07-15 21:48 | bonny.wong

回复 引用

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新闻:

·windows 7官方rss动态主题:《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

·但愿大嘴巴的消息再次失准

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序(quicksort)的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
2010-01-15 15:24:00 haijiaoxiaowu 阅读数 1092

最近又写了一个小玩意。 这个东西其实就是将一个数的单位进行转换(百-->万;万-->亿;千-->十等)

转换的思路就是乘除10的X次方(其实用字符数组可以直接移动小数点的位置这种方式……)

格式化的思路就是将输入的数字按整数与小数两部分分开,分别处理。每凑过3位就加一个逗号(将整数或小数部分转化成字符数组处理)。

格式化这部分(就是够3位加一个逗号),其实系统有现成的方法:Number类的toLocaleString。就是这个方法和本地设置有关系。

2011-11-13 13:28:15 csdou 阅读数 251
TreeNode tnRoot = new TreeNode();
tnRoot.ID = "dhArea" + i.ToString() + "\" onmouseup=\"javascript:SetWidthHight();"; 
tnRoot.Text = "基本资料区域";
tnRoot.NavigateUrl = "~/BaseInfo/Area/Area.aspx";
tnRoot.Target = "WelcomeForeignGuestMain";
TreeView1.Nodes.Add(tnRoot);

tnRoot.Target = "WelcomeForeignGuestMain" + "\" onmouseup=\"javascript:SetWidthHight();";//关键就在加红的这段代码。 


2019-02-26 13:05:02 qq_30753921 阅读数 50
2012-12-26 15:52:53 limlimlim 阅读数 512

1.通过dom读取元素的top,left,width,height等取到的值不是数字,而是“10px”这样的
   字符串;为这些属性设值的时候IE可以是80,90这样的数字,FireFox必须是"80px","90%"等
   这样的字符串形式,为了兼容统一用字符串形式
2.如果要修改元素的大小(宽度加10),则首先要取出元素的宽度,然后用parseInt将宽度转换
   为数字(parseInt可以将"20px"这样的数字开头的包含其他内容的字符串解析为20,
   parseInt('22px',10),也就是解析尽可能多的部分);然后加上一个值,再加上px赋值回去

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function GetWidth() {
            var div = document.getElementById("divMain");
            alert(div.style.width);
        }
        function SetWidth() {
            var div = document.getElementById("divMain");
            div.style.width = "200px";
        }
        function AddWidth() {
            var div = document.getElementById("divMain");
            var oldWidth = div.style.width;
            oldWidth = parseInt(oldWidth, 10);      //第二个参数10,代表转换为10进制
            oldWidth = oldWidth + 10;
            oldWidth = oldWidth + "px";
            div.style.width = oldWidth;
        }
    </script>
</head>
<body>
    <input type="button" value="取值" onclick="GetWidth()" />
    <input type="button" value="设值" onclick="SetWidth()" />
    <div id="divMain" style="width:100px;height:100px;background-color:Red">

    </div>
    <input type="button" value="宽度自增" onclick="AddWidth()" />
    <input type="button" value="解析字符串为数字"
            onclick="alert(parseInt('50asdfasdf',10))" />
</body>
</html>

JavaScript加性操作符

阅读数 1

一、加性操作符加性操作符主要包括加法(+)和减法(-)。在ECMAScript中,加性操作符也会在后台转换不同的数据类型。二、加法加法操作符(+)的用法如下:varresult=1+2;运行规则如下:如果两个操作符都是数值,则执行常规的加法计算。如果有一个操作符是字符串,那么就要应用如下规则:如果两个操作数都是字符串,则将第二个操作数与第一个...

博文 来自: weixin_34384915

JavaScript的月份加和问题

阅读数 684

JavaScript的Date直接加month可能造成日期顺延,比如2018-05-31,直接加6个月,因为11月没有31日,就变成2018-12-01了,想和Java一样变成2018-11-30,如果不使用第三方库,要先把日期改成1日,然后再加月份,再设置日期才行。functionaddDate1(){vardate=newDate('2018-05-31');d...

博文 来自: admin_tjz

javascript时间格式加8小时

阅读数 796

TitlevarfnTime=function(){varmyTime=newDate();//number

博文 来自: longzhoufeng

Javascript 日期加一天或加多天

阅读数 24

functionaddDate(date,days){if(days==undefined||days==''){days=1;}vardate=newDate(date);date.setDate(date.getDate()+days);...

博文 来自: qq_38366657

javascript一元加操作符

阅读数 947

vara="1";varb=false;varc="dd";vard={valueOf:function(){return-1}};vara=+a;varb=+b;varc=+c;vard=+d;alert(a);//输出1;执行+a一元加操作符,对数值无影响,会对非数值调用转换函数Number();alert(b);//输出:0;

博文 来自: jiaxiaofeng521016
没有更多推荐了,返回首页