js Table冻结表头示例代码

最新推荐文章于 2023-11-18 18:46:18 发布

转载最新推荐文章于 2023-11-18 18:46:18 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linuxnotes/p/3272303.html

文章标签：

#java #javascript #ViewUI

本文提供了一个简单的JavaScript代码示例，用于实现表格的冻结表头功能。通过改变DOM元素的样式和监听滚动事件，使得表格的第一行始终保持在视口内，无论页面滚动到何处。

js Table冻结表头示例代码

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

Table冻结表头：

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