Table冻结表头示例代码


Posted in Javascript onAugust 20, 2013

Table冻结表头:

<script type="text/javascript"> 
function fixupFirstRow(tab) { 
var div=tab.parentNode; 
if(div.className.toLowerCase()=="freezediv"){ 
tab.rows[0].style.zIndex="1"; 
tab.rows[0].style.position="relative"; 
div.onscroll = function(){ 
var tr = tab.rows[0]; 
tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); 
tr.style.left=-1; 
} 
} 
} window.onload = function(){ 
var tab=document.getElementById("freezedivTable"); 
if(tab){ 
fixupFirstRow(tab); 
} 
} 
</script>

html源码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<script type="text/javascript"> 
function fixupFirstRow(tab) { 
var div=tab.parentNode; 
if(div.className.toLowerCase()=="freezediv"){ 
tab.rows[0].style.zIndex="1"; 
tab.rows[0].style.position="relative"; 
div.onscroll = function(){ 
var tr = tab.rows[0]; 
tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); 
tr.style.left=-1; 
} 
} 
} window.onload = function(){ 
var tab=document.getElementById("freezedivTable"); 
if(tab){ 
fixupFirstRow(tab); 
} 
} 
</script> 
</head> 
<body> 
<div class="freezediv" style="width:100%;height:100px;overflow:auto;"> 
<table id="freezedivTable" style="width:100%;" border="1"> 
<tr bgcolor="white"> 
<th width="25%">序号</th> 
<th width="25%">内容</th> 
<th width="25%">序号</th> 
<th width="25%">内容</th> 
</tr> 
<tr> 
<td>1</td> 
<td>内容</td> 
<td>11</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>2</td> 
<td>内容</td> 
<td>22</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>3</td> 
<td>内容</td> 
<td>33</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>4</td> 
<td>内容</td> 
<td>44</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>5</td> 
<td>内容</td> 
<td>55</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>6</td> 
<td>内容</td> 
<td>66</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>7</td> 
<td>内容</td> 
<td>77</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>8</td> 
<td>内容</td> 
<td>88</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>9</td> 
<td>内容</td> 
<td>99</td> 
<td>内容</td> 
</tr> 
<tr> 
<td>10</td> 
<td>内容</td> 
<td>1010</td> 
<td>内容</td> 
</tr> 
</table> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
JS实现简单打字测试
Jun 24 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
js 自定义个性下拉选择框示例
Aug 20 #Javascript
JavaScript打印iframe内容示例代码
Aug 20 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python探索之SocketServer详解
2017/10/28 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
大学生就业求职信
2014/06/12 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
机关作风建设整改方案
2014/10/27 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL