JavaScript实现两个Table固定表头根据页面大小自行调整
<%@ 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>
相关推荐
-
jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析
这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教. /*! * This plug-in is de
-
JS实现随页面滚动显示/隐藏窗口固定位置元素
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel
-
JS实现部分HTML固定页面顶部随屏滚动效果
本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如
-
JS实现的表头列头固定页面功能示例
本文实例讲述了JS实现的表头列头固定页面功能.分享给大家供大家参考,具体如下: 这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft. 一.js中scrollTop及scrollLeft的使用说明 scrollTop指的是"元素中的内容"超出"元素上边界"的那部分的高度.例如:外层元素的高度值是200px,内层元素的高度值是300px.很明显,"外层元素中的内容&qu
-
js实现的GridView即表头固定表体有滚动条且可滚动
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat=&quo
-
JS实现超精简的链接列表在固定区域内滚动效果代码
本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META
-
javascript 带有滚动条的表格,标题固定,带排序功能.
复制代码 代码如下: //使用要求: //1.将表格的Class命名为:sorttableHold, //2.表格放置在一个div中,此div设有overflow属性. //3.表格要求有ID,div要求有ID //4.要有JQuery.min.js文件 //5.OK. addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tabl
-
JS实现自动固定顶部的悬浮菜单栏效果
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
js当前页面登录注册框,固定div,底层阴影的实例代码
这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
利用js+css+html实现固定table的列头不动
话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct