jQuery 기반 고정 표 머리 코드(IE6,7,8 테스트 통과)

한동안 프로젝트 를 할 때 목록 을 표시 해 야 하 는데 데이터 가 너무 많아 서 스크롤 할 때 헤더 가 동결 되 어야 하기 때문에 아래 스 크 립 트 를 썼 습 니 다.열 동결 을 지정 할 필요 가 없 기 때문에 현재 불완전한 스 크 립 트 라 고 할 수 있 습 니 다.그러나 일반적인 표 두 동결 만 있 으 면 사용 할 수 있 습 니 다).지금 은 캡 처 를 보 세 요.이렇게 표 두 의 동결 을 실 현 했 습 니 다.아래 표 체 는 자 유 롭 게 스크롤 하여 다음 코드 를 볼 수 있 습 니 다.//jquery 를 위해 Clone TableHeader 방법

 
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);//      
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); 
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); 
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()); 
} 

이상 을 확장 하 는 것 이 전체 코드 입 니 다.이제 어떻게 사용 하 는 지 살 펴 보 겠 습 니 다.페이지 에 다음 스 크 립 트

 
<script type="text/javascript"> 
jQuery(function() { 
jQuery.fn.CloneTableHeader("tab1", "div1"); 
}); 
</script> 

를 추가 하면 됩 니 다.표 와 표 가 있 는 DIV 의 ID 를 입력 하면 됩 니 다.동결 할 표 는 thead 에 넣 어야 합 니 다.그렇지 않 으 면 동결 이 불가능 합 니 다.이상 의 코드 는 IE6,7,8 테스트 를 통과 하면 FF 와 chrome 에 표 두 의 너비 가 정확 하지 않 은 문제 가 발생 할 수 있 습 니 다.구체 적 인 코드 포장 다운로드:주문 하 다PS:여러분,좋 으 시다 면 추천 좀 해 주세요.감사합니다!저자:kyo-yo 출처:http://kyo-yo.cnblogs.com