编程 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 相关文章推荐

给jqGrid数据行添加修改和删除操作链接（之一）

Nov 04 Javascript

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三

Jan 03 Javascript

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

Dec 16 Javascript

按Enter键触发事件的jquery方法实现代码

Feb 17 Javascript

浅谈JavaScript function函数种类

Dec 29 Javascript

JavaScript+CSS无限极分类效果完整实现方法

Dec 22 Javascript

jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

Nov 16 Javascript

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

Oct 26 Javascript

React学习笔记之条件渲染（一）

Jul 02 Javascript

基于bootstrap实现多个下拉框同时搜索功能

Jul 19 Javascript

微信小程序上传帖子的实例代码(含有文字图片的微信验证)

Jul 11 Javascript

JavaScript实现图片放大预览效果

Nov 02 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