jQuery に基づく固定テーブル ヘッダーのコード (IE6、7、8 でテスト済み)_jquery

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);//テーブルを取得content
var table = tableOrg.clone();//テーブル content
table.attr("id", "cloneTable");
//注: テーブル ヘッダーを次のように配置する必要があります。 thead
var tableHeader = jQuery(tableOrg).find("thead");
var tableHeaderHeight = tableHeader.height();
var colsWidths() 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 < 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]);
tableCloneCols.eq(i).width(colsWidths[i]);
}
}
}
// ヘッダーを凍結し、プロパティを設定する DIV コンテナを作成します
var headerDiv = document.createElement("div");
headerDiv.appendChild(table[0]);
jQuery(headerDiv).css(" height",
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(
}


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