萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript實現兩個Table固定表頭根據頁面大小自行調整
JavaScript實現兩個Table固定表頭根據頁面大小自行調整
正如標題所言兩個Table固定表頭，可根據頁面大小自行調整使用JavaScript實現，具體的示例如下，感興趣的朋友可以參考下
代碼如下: <%@ 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 處理的回調函數 */ 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved