基于jQuery的固定表头代码(IE6 7 8通过测试)

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

这样就冻结了表头，下面表体的内容可以自由滚动查看代码：//扩展一个jquery的CloneTableHeader方法复制代码如下：jQuery.fn.clone表头=函数(表ID，Parentdivid){//获取冻结表头所在的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())；}以上是完整的代码。现在，要了解如何使用：只需在页面中添加以下脚本来复制代码，如下所示： script type=' text/JavaScript ' jquery(function(){ jquery . fn . clone table header(' tab 1 '，' div 1 ')；});/脚本没关系。传入表的ID和表所在的DIV就可以了。必须注意的是，中要冻结的表头必须放在ad中，否则无法实现冻结。以上代码通过了IE6、7、8 7、8中的测试，但FF和chrome中的表头宽度不准确。打包下载具体代码：点击我下载PS:如果觉得有帮助就好，点击推荐。谢谢大家！作者：京优来源：http://kyo-yo.cnblogs.com。