테이블 headers_jquery를 고정하는 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 = parsFloat(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");
//참고: 고정할 헤더를 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 (browserVersion == 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(테이블[0]);
jQuery(headerDiv).css("height", tableHeaderHeight);
jQuery(headerDiv).css("overflow", "hidden");
jQuery(headerDiv).css("z-index", "20");
jQuery(headerDiv).css("너비", "100%");
jQuery(headerDiv).attr("id", "tableHeaderDiv" tableId);
jQuery(headerDiv).insertBefore(tableOrg.parent());
}

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

코드 복사 코드는 다음과 같습니다.

그게 전부입니다. 테이블과 테이블이 있는 DIV의 ID를 전달해도 괜찮습니다. 고정할 헤더를 광고에 배치해야 하며, 그렇지 않으면 고정할 수 없습니다.

위 코드는 IE6, 7, 8의 테스트를 통과했지만 FF와 Chrome에서는 헤더 너비가 정확하지 않은 문제가 발생합니다.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.