jQuery实现表头固定效果的实例代码


Posted in Javascript onMay 24, 2013

一、新建一js文件jQuery_FixedTableHead.js

内容如下:

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {
    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");
    var tableClone = jQuery(tableOrg).find("tr").each(function() {
    });
    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) {
        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]);
            }
        }
    }
    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());
}

二、Html实例文件

内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>qubernet@163.com_jQuery实现表头固定效果(挺不错的!!!)</title>
 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 
    <script src="jQuery_FixedTableHead.js" type="text/javascript"></script>
 
    <style type="text/css">
        .itemList
        {
            border: solid 1px #cccccc;
            overflow: hidden;
            width: 100%;
            border-collapse: collapse;
        }
        .itemList td
        {
            padding: 0px 0px 0px 0px;
            color: #444444;
            border: solid 1px #cccccc;
            text-align: center;
            line-height: 20px;
        }
    </style>
    <script type="text/javascript">
        jQuery(function() {
            jQuery.fn.CloneTableHeader("tab1", "div1");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" height: 250px; overflow:scroll;" id="div1">
        <table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">
            <thead>
                <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
                    padding: 0px 0px 0px 0px;">
                    <td>
                        列1
                    </td>
                    <td>
                        列2
                    </td>
                    <td>
                        列3
                    </td>
                    <td>
                        列4
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
                <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

注意:记得引入jQuery类库文件。

Javascript 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 #Javascript
使用js+jquery实现无限极联动
May 23 #Javascript
dwz 如何去掉ajaxloading具体代码
May 22 #Javascript
自动最大化窗口的Javascript代码
May 22 #Javascript
JS中的prototype与面向对象的实例讲解
May 22 #Javascript
JS定时关闭窗口的实例
May 22 #Javascript
jquery自定义属性(类型/属性值)
May 21 #Javascript
You might like
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
python 返回列表中某个值的索引方法
2018/11/07 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Django 再谈一谈json序列化
2020/03/16 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
单位门卫岗位职责
2013/12/20 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
中式婚礼主持词
2014/03/13 职场文书
总经理助理的职责
2014/03/14 职场文书
法制宣传日活动总结
2014/04/29 职场文书
艺术教育实施方案
2014/05/03 职场文书
人事任命书怎么写
2014/06/05 职场文书
工程索赔意向书
2014/08/30 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
针对吵架老公保证书
2015/05/08 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
《实心球》教学反思
2016/02/23 职场文书
合作合同协议书
2016/03/21 职场文书