首頁 > web前端 > js教程 > jQuery實作表頭固定效果的實例程式碼_jquery

jQuery實作表頭固定效果的實例程式碼_jquery

WBOY
發布: 2016-05-16 17:33:18
原創
1664 人瀏覽過

一、新建一js檔jQuery_FixedTableHead.js

內容如下:

複製程式碼 程式碼如下:

jQuery.fn.CloneTableHeader; {

    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

            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實例檔

內容如下:

複製程式碼 程式碼如下:

    qubernet@163.com_jQuery实现表头固定效果(挺不错的!!!)

 

   

 

   

 

   

   

   

   

       

           

               

                   

                   

                   

                   

               

           

           

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

           

       

   

   

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板

                        列1

                   

                        列2

                   

                        列3

                   

                        列4

                   

我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………
我是已測試的資料行… 我是測驗的資料行… 我是測驗的資料行… …………… 我是測試的資料行…………