ホームページ > ウェブフロントエンド > jsチュートリアル > ヘッダー修正を実現するための jQuery のコード例effect_jquery

ヘッダー修正を実現するための jQuery のコード例effect_jquery

WBOY
リリース: 2016-05-16 17:33:18
オリジナル
1665 人が閲覧しました

1. 新しい 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);

varscrollWidth = 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();

varcolsWidths = 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 (ブラウザバージョン == 8.0)

tableCloneCols.eq(i).width(colsWidths[i]scrollWidth);

その他

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());

}

2. HTML サンプル ファイル

内容は以下の通りです:

コードをコピー コードは次のとおりです:

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

 

   

 

   

 

   

   

   

   

       

           

               

                   

                   

                   

                   

               

           

           

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

それはテストですデータ行…………

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート

                        列1

                   

                        列2

                   

                        列3

                   

                        列4

                   

我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………我是测试的数据行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………
私はテストデータ行…………