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


Posted in Javascript onMay 18, 2010

段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也找过相应的脚本,但是不怎么理想所以就自己写了,但是目前由于项目仅仅用到了表头的冻结,而不需要指定列冻结所以目前只能算个不完整的脚本,不过一般的仅仅需要表头冻结就可以使用了),现在先看看截图:

基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
这样实现了表头的冻结,下面表体内容可以自由滚动
看下代码:
//为jquery扩展一个CloneTableHeader 方法

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { 
//获取冻结表头所在的DIV,如果DIV已存在则移除 
var obj = document.getElementById("tableHeaderDiv" + tableId); 
if (obj) { 
jQuery(obj).remove(); 
} 
var browserName = navigator.appName;//获取浏览器信息,用于后面代码区分浏览器 
var ver = navigator.appVersion; 
var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows"))); 
var content = document.getElementById(tableParentDivId); 
var scrollWidth = content.offsetWidth - content.clientWidth; 
var tableOrg = jQuery("#" + tableId);//获取表内容 
var table = tableOrg.clone();//克隆表内容 
table.attr("id", "cloneTable"); 
//注意:需要将要冻结的表头放入thead中 
var tableHeader = jQuery(tableOrg).find("thead"); 
var tableHeaderHeight = tableHeader.height(); 
tableHeader.hide(); 
var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() { 
return jQuery(this).width(); 
});//动态获取每一列的宽度 
var tableCloneCols = jQuery(table).find("thead tr:first td") 
if (colsWidths.size() > 0) {//根据浏览器为冻结的表头宽度赋值(主要是区分IE8) 
for (i = 0; i < tableCloneCols.size(); i++) { 
if (i == tableCloneCols.size() - 1) { 
if (browserVersion == 8.0) 
tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth); 
else 
tableCloneCols.eq(i).width(colsWidths[i]); 
} else { 
tableCloneCols.eq(i).width(colsWidths[i]); 
} 
} 
} 
//创建冻结表头的DIV容器,并设置属性 
var headerDiv = document.createElement("div"); 
headerDiv.appendChild(table[0]); 
jQuery(headerDiv).css("height", tableHeaderHeight); 
jQuery(headerDiv).css("overflow", "hidden"); 
jQuery(headerDiv).css("z-index", "20"); 
jQuery(headerDiv).css("width", "100%"); 
jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId); 
jQuery(headerDiv).insertBefore(tableOrg.parent()); 
}

以上就是完整代码,现在看下如何使用:
只需在页面中加入以下脚本
<script type="text/javascript"> 
jQuery(function() { 
jQuery.fn.CloneTableHeader("tab1", "div1"); 
}); 
</script>

这样就可以了,传入表和表所在的DIV的ID就OK了,必须注意的是:要冻结的表头必须放入到thead中,否则无法实现冻结。
以上代码在IE6,7,8测试通过,FF和chrome会出现表头的宽度不准确的问题。
具体代码打包下载:点我下载
PS:大家如果觉得好帮忙点下推荐,谢谢大家了!
作者:kyo-yo
出处:http://kyo-yo.cnblogs.com
Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
Javascript中的变量使用说明
May 18 #Javascript
Javascript实现的鼠标经过时播放声音
May 18 #Javascript
JavaScript 继承机制的实现(待续)
May 18 #Javascript
JavaScript 面向对象编程(2) 定义类
May 18 #Javascript
JavaScript 面向对象编程(1) 基础
May 18 #Javascript
Javascript Object.extend
May 18 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 #Javascript
You might like
菜鸟修复电子管记
2021/03/02 无线电
PHP静态成员变量
2017/02/14 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Python实现一个优先级队列的方法
2020/07/31 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
自我推荐信范文
2014/05/09 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android