집 >웹 프론트엔드 >JS 튜토리얼 >테이블 headers_jquery를 고정하는 jQuery의 방법

테이블 headers_jquery를 고정하는 jQuery의 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의: 2016-05-16 16:10:571333검색

이 문서의 예에서는 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 < tableCloneCols.size(); 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());

}

위 코드는 전체 코드입니다. 이제 사용 방법을 살펴보겠습니다.

다음 스크립트를 페이지에 추가하세요

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