基于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 相关文章推荐
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
web方式ftp
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
php解析url的三个示例
2014/01/20 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
vue登录注册实例详解
2019/09/14 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
初学Python实用技巧两则
2014/08/29 Python
python实现实时监控文件的方法
2016/08/26 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
护士自荐信范文
2015/03/25 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书