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

前端技术 2023/09/07 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>

本文地址：https://www.stayed.cn/item/20161

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案