jQuery实现冻结表头的方法

本文描述了jQuery冻结标题的方法。分享给大家参考。具体如下：

前段时间做项目的时候，需要显示一个列表，但是因为数据太多，滚动的时候标题要冻结，所以写了下面的脚本(以前在网上找对应的脚本，但是不理想，所以自己写的。但目前由于项目只使用了表头的冻结，而不需要指定列冻结，只能算是不完整的脚本，但一般只能通过冻结表头来使用)。现在，让我们看看截图。

这样就冻结了表头，下面表体的内容可以自由滚动。

请看下面的代码：复制代码如下：//扩展一个CloneTableHeader方法jquery . fn . CloneTableHeader=function(tableid，tableparentDIVid){//获取冻结头所在的div。如果DIV已经存在，请移除varobj=document . getelementbyid(' tableheader DIV ' tableid)；if (obj) { jQuery(obj)。移除()；} var browser name=navigator . appname；//获取浏览器信息，通过以下代码来区分浏览器。var ver=navigator.appVersionvar browserVersion=parseFloat(ver . substring(ver . indexof(' MSIE ')5，ver . last indexof(' Windows ')))；var content=document . getelementbyid(tableParentDivId)；var scrollWidth=content . offsetwidth-content . client width；var tableOrg=jQuery(' # ' tableId)；//获取目录var table=tableorg . clone()；//克隆表目录table.attr('id '，' cloneTable ')；//注意：需要把需要冻结的表头放在ad中。var表头=jquery (tableorg)。find(' thead ')；var tableHeaderHeight=tableheader . height()；tableheader . hide()；var colsWidths=jQuery(tableOrg)。find('tbody tr:first td ')。map(function(){ return jQuery(this))。宽度()；});//动态获取每列的宽度var tableclones=jquery (table)。find(' the DTR : first TD ')if(colswidths。size()0){//根据浏览器(主要区分IE8)为冻结的表头宽度赋值为(I=0；I tablecloneclus . size()；I){ if(I==tableclonecolors . size()-1){ if(browserVersion==8.0)tableclonecolors . eq(I)。宽度(colsWidths[I]scrollWidth)；else TableCloneclus . eq(I)。宽度(列宽度[I])；} else { TableCloneclus . eq(I)。宽度(列宽度[I])；} } }//创建一个用于冻结标题的DIV容器，并设置属性var header DIV=document . Create element(' DIV ')；headerDiv.appendChild(表[0])；jQuery(headerDiv)。css('height '，TableHeaderheight)；jQuery(headerDiv)。css('溢出'，'隐藏')；jQuery(headerDiv)。css('z-index '，' 20 ')；jQuery(headerDiv)。css('width '，' 100% ')；jQuery(headerDiv)。attr('id '，' TableHeaderdiv ' TableID)；jQuery(headerDiv)。insert before(tableorg . parent())；}以上是完整的代码。现在我们来看看如何使用：

只需将以下脚本添加到页面中，复制代码如下：脚本类型=' text/JavaScript ' jquery(function(){ jquery . fn . clone table header(' tab 1 '，' div 1 ')；});/脚本没关系。传入表的ID和表所在的DIV就可以了。必须注意的是，中要冻结的表头必须放在ad中，否则无法实现冻结。

以上代码通过了IE6、7、8 7、8中的测试，但FF和chrome中的表头宽度不准确。

单击此处下载完整的示例代码。

希望本文对大家的jQuery程序设计有所帮助。