快捷導(dǎo)航

JavaScript實現(xiàn)兩個Table固定表頭根據(jù)頁面大小自行調(diào)整

更新時間：2014年01月03日 15:32:58 作者：

正如標(biāo)題所言兩個Table固定表頭，可根據(jù)頁面大小自行調(diào)整使用JavaScript實現(xiàn)，具體的示例如下，感興趣的朋友可以參考下

 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title></title> 
<script> 
/** 
* @param oTarget 需要加載scroll的dom對象 
* @param fnHandler 處理的回調(diào)函數(shù) 
*/ 
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"); 
}); 
}; 
</script> 
</head> 
<body> 
<div id="div1All" 
style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px"> 
<div id="divHeaderID" 
style="margin-right: auto; margin-left: auto; overflow: hidden;"> 
<table border="1" cellspacing="0" 
style="BORDER-COLLAPSE: collapse; font-size: 15px" 
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa" 
width="600px"> 
<Tr style="background: navy; color: white; height: 30px"> 
<Th width="100px">Header A</Th> 
<Th width="100px">Header B</Th> 
<Th width="100px">Header C</Th> 
<Th width="100px">Header D</Th> 
<Th width="100px">Header E</Th> 
<Th width="100px">Header F</Th> 
</Tr> 
</table> 
</div> 
<div id="divContentID" 
style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll"> 
<table border="1" cellspacing="0" 
style="BORDER-COLLAPSE: collapse; font-size: 15px" 
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa" 
width="600px"> 
<Tr> 
<Td width="100px">A</Td> 
<Td width="100px">B</Td> 
<Td width="100px">C</Td> 
<Td width="100px">D</Td> 
<Td width="100px">E</Td> 
<Td width="100px">F</Td> 
</Tr> 
<Tr> 
<Td width="100px">A</Td> 
<Td width="100px">B</Td> 
<Td width="100px">C</Td> 
<Td width="100px">D</Td> 
<Td width="100px">E</Td> 
<Td width="100px">F</Td> 
</Tr> 
<Tr> 
<Td width="100px">A</Td> 
<Td width="100px">B</Td> 
<Td width="100px">C</Td> 
<Td width="100px">D</Td> 
<Td width="100px">E</Td> 
<Td width="100px">F</Td> 
</Tr> 
<Tr> 
<Td width="100px">A</Td> 
<Td width="100px">B</Td> 
<Td width="100px">C</Td> 
<Td width="100px">D</Td> 
<Td width="100px">E</Td> 
<Td width="100px">F</Td> 
</Tr> 
<Tr> 
<Td width="100px">A</Td> 
<Td width="100px">B</Td> 
<Td width="100px">C</Td> 
<Td width="100px">D</Td> 
<Td width="100px">E</Td> 
<Td width="100px">F</Td> 
</Tr> 
</table> 
</div> 
</div> 
</body> 
</html> 