本文的示例讲述了用jQuery实现冻结头的
方法,供大家
参考:
前一段时间,当需要
显示一个列表做项目,但由于在轧制时头太多的数据必须被冻结,所以我写了下面的
脚本(一旦在网上也找到了相应的脚本,但不太好,所以他们写的,但现在因为项目只使用头的冰冻而不必指定冻结到目前为止只能算是一个完整的剧本,列但一般只需要冻结的标题可以使用),现在看看
截图:
实现了米体以下的冻结,内容可自由滚动。
看代码:
复制代码如下: / / jQuery的一个clonetableheader
扩展方法
jquery.fn.clonetableheader =
功能(ID,tableparentdivid){
如果有要
删除div的话,请获取div头/冻结
var obj = document.getelementbyid(tableheaderdiv+ ID);
如果(obj){
jQuery(obj)删除();
}
无功browsername = navigator.appname; / /
浏览器获取信息,区分浏览器的代码隐藏
VaR navigator.appversion版本=;
无功browserversion = parseFloat(ver.substring(ver.indexof(MSIE)+ 5,ver.lastindexof(Windows)))))
无功量= document.getelementbyid(tableparentdivid);
无功scrollwidth = content.offsetwidth - content.clientwidth;
无功tableorg = jQuery(# + ID); / /
目录 var = tableorg.clone(表); / /克隆表内容
table.attr(身份
/ /注:要想冻结在螺纹头
无功tableheader = jQuery(tableorg)。找到(线);
无功tableheaderheight = tableheader.height();
tableheader.hide();
无功colswidths = jQuery(tableorg)。找到(TBODY TR:首先TD)。图(
函数(){(){
返回jQuery(Width);
};动态访问每个列的宽度
无功tableclonecols = jQuery(表),
发现(AD TR:首先TD)
如果(colswidths。大小)(> 0){ / /根据浏览器为冻米宽度(主要在IE8)
为(i = 0;i < tableclonecols.size();i++){
如果(我= = tableclonecols。大小){(1)
如果(browserversion = 8)
tableclonecols.eq(我),Width(colswidths {我} + scrollwidth);
其他的
tableclonecols.eq(我),Width(colswidths {我});
{人}
tableclonecols.eq(我),Width(colswidths {我});
}
}
}
div容器
创建了冻结的头
文件和
设置属性。
无功headerdiv = document.createelement(div);
headerdiv.appendchild(表{ 0 });
jQuery(headerdiv)。Css(高
jQuery(headerdiv)。Css(溢出
jQuery(headerdiv)。Css(Z
jQuery(headerdiv)。Css(宽
jQuery(headerdiv)。Attr(身份
jQuery(headerdiv)。InsertBefore(tableorg.parent());
}
以上是完整的代码,现在看看如何使用:
只需在页面中添加以下脚本
复制代码代码如下所示:
函数(){()
JQuery.fn.CloneTableHeader(表
});
这是好的,传入表和表所在的div的ID是OK的。必须指出的是,冷冻头必须放进线,否则冻结无法实现。
上面的代码是通过ie6,7,8测试,和FF和Chrome将与割台宽度误差有问题。
完整的实例代码在这里
下载。
希望本文能对大家的jQuery
程序设计有所帮助。