JavaScript实现两个Table固定表头根据页面大小自行调整_javascript技巧



代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>





/**
* @param oTarget 需要加载scroll的dom对象
* @param fnHandler 处理的回调函数
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener("scroll", fnHandler, false);
} 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 = left;

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

window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID");
eventHandler(oDiv, function() {
oo("divContentID", "divHeaderID");
});
};



style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">
style="margin-right: auto; margin-left: auto; overflow: hidden;">

style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">

Header A	Header B	Header C	Header D	Header E	Header F

style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">

A	B	C	D	E	F
A	B	C	D	E	F
A	B	C	D	E	F
A	B	C	D	E	F
A	B	C	D	E	F