基于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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
处理canvas绘制图片模糊问题
May 11 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
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
节水倡议书范文
2014/04/15 职场文书
法定代表人授权委托书
2014/09/19 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
创业计划书之家教托管
2019/09/25 职场文书
古诗之感恩老师
2019/10/24 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js