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 相关文章推荐
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
Vue二次封装axios为插件使用详解
May 21 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 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
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Python的两道面试题
2013/06/29 面试题
高中教师先进事迹材料
2014/08/22 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
php双向队列实例讲解
2021/11/17 PHP