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 相关文章推荐
jquery maxlength使用说明
Sep 09 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
You might like
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php获取url参数方法总结
2014/11/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Python堆排序原理与实现方法详解
2018/05/11 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python如何查看网页代码
2020/06/07 Python
2015年七年级班主任工作总结
2015/05/21 职场文书
长江七号观后感
2015/06/11 职场文书
辩论会主持词
2015/07/03 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
mysql 带多个条件的查询方式
2021/06/05 MySQL
Oracle中update和select 关联操作
2022/01/18 Oracle
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers