jQuery实现冻结表头的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery实现冻结表头的方法。分享给大家供大家参考。具体如下:

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

jQuery实现冻结表头的方法

这样实现了表头的冻结,下面表体内容可以自由滚动

看下代码:

//为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会出现表头的宽度不准确的问题。

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
理解javascript对象继承
Apr 17 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
浅析Vue 生命周期
Jun 21 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 #Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 #Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 #Javascript
JS实现文件动态顺序载入的方法
Mar 07 #Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 #Javascript
PHP守护进程实例
Mar 06 #Javascript
JavaScript操作Oracle数据库示例
Mar 06 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP反射实际应用示例
2019/04/03 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python实现飞机大战小游戏
2019/11/08 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python代码注释规范代码实例解析
2020/08/14 Python
简述 Python 的类和对象
2020/08/21 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android