编程 Javascript

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类库文件。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery切换显示的效果实例代码

Feb 27 Javascript

Jquery easyui 下loaing效果示例代码

Aug 12 Javascript

浅析XMLHttpRequest的缓存问题

Dec 13 Javascript

为jquery的ajaxfileupload增加附加参数的方法

Mar 04 Javascript

javascript数组去重方法终极总结

Jun 05 Javascript

JavaScript 作用域链解析

Nov 13 Javascript

js完美实现@提到好友特效（兼容各大浏览器）

Mar 16 Javascript

JS小数转换为整数的方法分析

Jan 07 Javascript

js数字滑动时钟的简单实现(示例讲解)

Aug 14 Javascript

浅谈vue引入css,less遇到的坑和解决方法

Jan 20 Javascript

Element UI框架中巧用树选择器的实现

Dec 12 Javascript

React学习之JSX与react事件实例分析

Jan 06 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