jQuery のテーブルを凍結するメソッド headers_jquery

この記事の例では、jQuery が凍結されたテーブル ヘッダーを実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

少し前にプロジェクトに取り組んでいたとき、リストを表示する必要があったのですが、データが多すぎてスクロール時にテーブルのヘッダーが固定されなければならなかったので、次のスクリプトを書きました（インターネット上にある対応するスクリプトを参照してください。ただし、それほどではありません） 理想的だったので自分で書きましたが、現時点では、プロジェクトはテーブルヘッダーの凍結のみを使用しており、列の凍結を指定する必要がないため、不完全としか考えられません現時点ではスクリプトを使用していますが、通常はテーブルヘッダーが凍結されている場合にのみ使用できます)。スクリーンショットを見てください:

これにより、テーブルのヘッダーが固定され、その下のテーブル本体のコンテンツが自由にスクロールできるようになります

コードを見てください:

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

//jquery の CloneTableHeader メソッドを拡張します
jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {
// 凍結されたヘッダーが配置されている DIV を取得します。DIV が既に存在する場合は削除します
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");
//注: 凍結するヘッダーを thead に入れる必要があります
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) {//ブラウザに従って固定ヘッダーの幅に値を割り当てます (主に IE8 を区別するため)
for (i = 0; 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]);
}
}
}
// 凍結されたヘッダーの DIV コンテナを作成し、プロパティを設定します
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());
}

上記は完全なコードです。次に、その使用方法を見てみましょう:
次のスクリプトをページに追加するだけです

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

テーブルとそのテーブルが配置されている DIV の ID を渡すだけでOKです。凍結するヘッダーは thead に配置する必要があることに注意してください。そうしないと、凍結を実行できません。

上記のコードは IE6、7、8 ではテストに合格しましたが、FF と Chrome ではヘッダー幅が不正確になるという問題が発生します。

完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。