js Table冻结表头示例代码

Table冻结表头的js实现代码。

Table冻结表头：

<script type="text/javascript">
//冻结table的表头 
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; 
} 
} 
} 
//加载

//by www.jbxue.com
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 >