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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js Math 对象的方法
Sep 01 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
记录一次websocket封装的过程
Nov 23 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php下实现农历日历的代码
2007/03/07 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
PHP Include文件实例讲解
2019/02/15 PHP
YII框架关联查询操作示例
2019/04/29 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
对Django中内置的User模型实例详解
2019/08/16 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
矫正人员思想汇报
2014/01/08 职场文书
小学五年级学生评语
2014/04/22 职场文书
医德医风演讲稿
2014/05/20 职场文书
在职证明格式样本
2015/06/15 职场文书
导游词之天津盘山
2019/11/01 职场文书