编程 Javascript

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

Posted in Javascript onJanuary 03, 2014

<%@ 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 相关文章推荐

javascript五图轮播切换实用版

Aug 17 Javascript

得到jQuery detach()后节点中的某个值实现代码

Feb 05 Javascript

JS关闭窗口与JS关闭页面的几种方法小结

Dec 17 Javascript

ExtJS4给Combobox设置列表中的默认值示例

May 02 Javascript

JS常见问题之为什么点击弹出的i总是最后一个

Jan 05 Javascript

深入浅析search 搜索框的写法

Aug 02 Javascript

ES6学习笔记之map、set与数组、对象的对比

Mar 01 Javascript

vue 组件高级用法实例详解

Apr 11 Javascript

浅谈Node 异步IO和事件循环

May 05 Javascript

Vue使用Proxy监听所有接口状态的方法实现

Jun 07 Javascript

vue2 拖动排序 vuedraggable组件的实现

Aug 08 Javascript

nuxt引入组件和公共样式的操作

Nov 05 Javascript

js传中文参数controller里获取参数乱码问题解决方法

Jan 03 #Javascript

IE6下拉框图层问题探讨及解决

Jan 03 #Javascript

javascript 表格内容排序简单操作示例代码

Jan 03 #Javascript

通过JS来判断页面控件是否获取焦点

Jan 03 #Javascript

使用js判断控件是否获得焦点

Jan 03 #Javascript

js保留小数点后几位的写法

Jan 03 #Javascript

js判断字符是否是汉字的两种方法小结

Jan 03 #Javascript

i7 6700(1) 窗口函数(3) 速龙(1) i5 9400(1) win10(43) i5 10400(1) GTX1660(1) win11(40) Tomcat(18) ipad(1)