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 ;
}
}
上面的注释已经很清楚啦!
不过还是要整理,扩展一下.
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!