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);
var scrollWidth = content.offsetWidth - content .clientWidth;
var tableOrg = jQuery("#" tableId);//테이블 가져오기 content
var table = tableOrg.clone();//테이블 콘텐츠 복제
table.attr("id", "cloneTable")
//참고: 테이블 헤더를 넣어야 합니다. 광고에 고정됨
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 < 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]);
}
}
}
// 헤더를 고정하는 DIV 컨테이너 생성 및 속성 설정
var headerDiv = document.createElement("div");
headerDiv.appendChild(table[0]);
jQuery(headerDiv).css(" height", tableHeaderHeight); 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( ))


위는 전체 코드입니다. 이제 사용 방법을 살펴보겠습니다.
다음 스크립트를 페이지에 추가하세요