JavaScript實作兩個Table固定表頭依頁面大小自行調整_javascript技巧

複製程式碼 程式碼如下:

pageEncoding="UTF-8"%>
場//EN" "http://www.w3.org/TR/html4/loose.dtd">


標題>

/**
* @param oTarget 需要載入scroll的dom物件
* @param fnHandler 處理的回呼函數
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener( “滾動”，fnHandler，假）；
} else if (oTarget.attachEvent) {
oTarget.attachEvent("onscroll", fnHandler);
} else {
oTarget["onscroll"] = fnHandler;
}
};

function oo(divContentID, divHeaderID) {
var div = document.getElementById(divContentID);
var left = div.scrollLeft;
var divHeader = document.getElementById(divHeaderID);
divHeader.scrollLeft = 左；


var disWidth = div.children[0].style.width.replace("px", "")
- div.style.widthth .replace("px", "" );
if (div.scrollLeft >= disWidth) {
divHeader.style.overflowY = 'scroll';
} else {
divHeader.style. OverflowY = '隱藏';
}
}

window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID"); , function() {
oo("divContentID", "divHeaderID");
}；
腳本>
頭>

style="位置：絕對；左：0px；右：0px；上：0px；下：0px">

style="margin-right: auto; margin-left : auto; Overflow: hide;">
style=“BORDER-COLLAPSE：折疊；字體大小：15px”
borderColor=“#c1dad7” cellPadding=“0”bgcolor=“#f5fffa”
寬度=“600px”>

標題A
標題B
標題C
標題D
標題E
標題F

表>

style="位置：絕對；左：0px ；上：30.5px；下：0px；右： 0px；溢出：滾動">
style=“BORDER-COLLAPSE：折疊；字體大小：15px ”
borderColor=“#c1dad7”cellPadding =“0”bgcolor=“#f5fffa”
寬度=“600px”>

A Td>
B
C
D
E
F


A
B
C
D
E
F


A
B
C Td>
D
E
F


A
B
C
D
E
F


A
B
C
D
E Td>
F

表>