基于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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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
从php核心代码分析require和include的区别
2011/01/02 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
基于Python List的赋值方法
2018/06/23 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
创业计划书之酒吧
2019/12/02 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
HTML+JS实现在线朗读器
2022/02/15 Javascript