Table冻结表头示例代码

更新时间：2013年08月20日 19:06:34 作者：

Table冻结表头，大家对此应该不会很陌生，实现很简单，下面为大家详细介绍下具体的实现，感兴趣的朋友可以参考下

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> 

js实现验证码干扰（静态）
这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-02-02
Javascript中return的使用与闭包详解
Javascript中return与闭包对大家来说应该都不陌生，下面本文就给大家介绍了Javascript中return的使用与闭包。文中给出了详细的示例代码，对大家的理解和学习具有一定的参考借鉴价值，感兴趣的朋友们下面来一起看看吧。
2017-01-01
js实现复制功能(多种方法集合)
这篇文章主要介绍了js实现复制功能(多种方法集合),需要的朋友可以参考下
2018-01-01
Javascript 类、命名空间、代码组织代码
Javascript 类、命名空间、代码组织代码，学习js的朋友可以参考下。
2011-07-07
javascript 动态修改css样式方法汇总(四种方法)
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧
2015-08-08
javascript使用isNaN()函数判断变量是否为数字
javascript中判断变量是否为数字的方法，这里主要介绍javascript里的 isNaN() 函数，具体使用如下，感兴趣的朋友可以参考下
2013-09-09
js获取ajax返回值代码
这篇文章主要介绍了js如何获取ajax的返回值,需要的朋友可以参考下
2014-04-04
js getBoundingClientRect() 来获取页面元素的位置
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
2010-11-11
javascript自适应宽度的瀑布流实现思路
这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的，感兴趣的你可以参考下哦
2013-02-02
原生javascript实现隔行换色
这篇文章主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
2015-01-01