ASP.NET页面的一点小东东(二)

javascript实现table折叠

 function ShowTable(imgCtrl)
        {
              var ImgPlusScr ="../Images/icon_expandall.gif" ;       // pic Plus  +
              var ImgMinusScr ="../Images/icon_collapseall.gif" ;     // pic Minus -
              var TableID = imgCtrl.id.replace("Img","Table");//将当前传进来的图片名称替换成对应的table+图片的编号
              var className;
              var objectFullName;
              var tableCtrl;
              objectFullName = <%=Table4.ClientID%>.id;      //获取服务器控件table的id
          
              className = objectFullName.substring(0,objectFullName.indexOf("Table4")-1);//获取除tablename以外的控件名称
             
              tableCtrl = document.all.item(className.substr(0,className.length)+"_"+TableID);        //根据替换后的TableID来拼装字符串,得到该table在页面生成的控件名称,然后通过documnet对象来获取页面对象                    
              if(imgCtrl.src.indexOf("icon_expandall") != -1)   //如果在获取到的控件路径里找到了"icon_expandall"字符串,则将table的style属性设为“”,并将图片替换成收起的标识
              {
                tableCtrl.style.display ="";
                imgCtrl.src = ImgMinusScr ;
              }
              else                              //如果在获取到的控件路径里找不到"icon_expandall"字符串,则将table的style属性设为none不显示表格的内容,并将图片替换成展开的标识
              {
                tableCtrl.style.display ="none";
                imgCtrl.src = ImgPlusScr ;  
              }
        }
    </script>

 

上面的注释已经很清楚啦!

不过还是要整理,扩展一下.

ImgPlusScr ,ImgMinusScr :这两个变量是用来存储页面图片路径的,为后面的判断提供条件.

TableID :用来获取表的名称.

className:获取类名,在页面生成的html文件中,aspx会将此类名加上"_tableID"显示.

objectFullName:取一个Table的全名,这个表是页面中的任意表,这里主要是为获取calssname提供依据.

tableCtrl:获取一个table控件

其实把这些个变量搞清楚了,要做什么就不言而喻啦!

按照执行顺利,我们一步一步分析.

1、给各变量赋值.

2、获取对象全名.

3、获取table对象的类名.

4、用刚获取到的类名+tableID组成调用此方法的table控件名称.再通过documnet对象获取对应的table对象,当然这里的tableID直接关系到页面的表,在取此在tableID里应找到对应的表。

5、对传入的img对象图片路径进行判断,用来确定是展开还是重叠。根据不同的结果做出 tableCtrl.style.display参数据的配置,为“”是显示对应表,为“none”是隐藏对应表。这里也会对相应的图片进行切换。

 

以前为常见的一种折叠页面内容的做法。

朋友们如果有更好的应用,希望多多指教。Thanks!

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值