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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
如何阻止复制剪切和粘贴事件为了表单内容的安全
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
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
个人自我评价分享
2013/12/20 职场文书
报社实习生自荐信
2014/01/24 职场文书
小露珠教学反思
2014/04/30 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
现实表现材料范文
2014/12/23 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android