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>

时间: 2014-01-01

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+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

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实现超精简的链接列表在固定区域内滚动效果代码

本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

JS实现的表头列头固定页面功能示例

本文实例讲述了JS实现的表头列头固定页面功能.分享给大家供大家参考,具体如下: 这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft. 一.js中scrollTop及scrollLeft的使用说明 scrollTop指的是"元素中的内容"超出"元素上边界"的那部分的高度.例如:外层元素的高度值是200px,内层元素的高度值是300px.很明显,"外层元素中的内容&qu

JS实现随页面滚动显示/隐藏窗口固定位置元素

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

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实现部分HTML固定页面顶部随屏滚动效果

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

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

jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析

这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教. /*! * This plug-in is de

jQuery中each和js中forEach的区别分析

本文实例讲述了jQuery中each和js中forEach的区别.分享给大家供大家参考,具体如下: <script> $(function(){ // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值:没有返回值 var res = arr.forEach(function(ele, idx){ console.log(idx, ele);

jQuery中数据缓存$.data的用法及源码完全解析

一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中.在读取.设置.移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取.设置.移除操作. 对于Javascript对象,数据则直接存储在该Javascript对象的属性jQuery.expando上.在读取.设置.移

BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

jQuery中cookie插件用法实例分析

本文实例讲述了jQuery中cookie插件用法.分享给大家供大家参考,具体如下: Jquery里面提供了很多插件,方便,安全,快速实用.这节一起熟悉下JQUERY中操作Cookie的插件,插件名称为jquery.cookie.js,可以去官方网站下载. 下载地址: http://plugins.jquery.com/project/cookie. 插件主要报告如下几个用法 1.创建Cookie 创建一个名称为username,值为 admin的cookie ,如下 复制代码 代码如下: $.c

jQuery中使用validate插件校验表单功能

一.功能效果 二.部分特殊规则 2.1 错误信息位置更改 在表单某选项中增加代码 <label class="error" for="表单中选项的name"></label> 例如 : 性别必选 <td> <input type="radio" id="male" value="m" name="sex"/>男 <input type

Angular5中调用第三方js插件的方法

话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli.json文件中配置 步骤: 1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件(注意先后顺序) "scripts": ["assets/jquery-3.2.1.js","assets/jquery

JS实现table表格固定表头且表头随横向滚动而滚动

先看一张效果图 思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS代码

关于JS与jQuery中的文档加载问题

jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function),   而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.   $(documen

js和jquery中循环的退出和继续下一个循环

作为水货,就是学会了1+1=3也要记录一下!错了,是2 学习记录: js中的 for(var i=1;i<5;i++){ if(i==3){ break; // 使用break,弹出2次提示分别为1,2:如果使用continue,则会弹出3次,分别是1,2,4 } alert(i); } 循环,退出循环,使用break:退出当前循环继续下一个循环,使用continue jquery中的each()方法中要实现break,使用return false:continue,使用return true