最近在网上看到一段十分精简的实现表头固定的脚本,刚好项目中需要,于是利用Jquery进行重写和简单的封装, 基本可以在不改动现有表格的基础上实现表头固定,而且可以支持在同一个页面有多个table。
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.tableDiv{
overflow-x:hidden;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 1px solid;
}
.theadDiv{
position:relative;
white-space:nowrap
}
.contentDiv{
overflow-x:scroll;
overflow-y:scroll
}
.theadTd {
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 1px solid;
padding-top:5px;
padding-left: 4px;
padding-right: 4px;
HEIGHT: 25px;
overflow:hidden;
WHITE-SPACE: nowrap
}
</style>
</head>
<script type="text/javascript">
function setScrollGrid(tableID,twidth,theight){
var jqTable = $("#"+tableID);
var tableDivID = tableID+"_div";
var theadDivID = tableID+"_thead";
var contentDivID = tableID+"_content";
var tableDiv = document.createElement("DIV");
var theadDiv = document.createElement("DIV");
var contentDiv = document.createElement("DIV");
var jqTableDiv = $(tableDiv);
var jqTheadDiv = $(theadDiv);
var jqContentDiv = $(contentDiv);
jqTableDiv.addClass("tableDiv");
jqTheadDiv.addClass("theadDiv");
jqContentDiv.addClass("contentDiv");
jqContentDiv.get(0).onscroll = function(){ jqTheadDiv.get(0).style.posLeft=-jqContentDiv.get(0).scrollLeft;}
$(tableDiv).append(theadDiv);
$(tableDiv).append(contentDiv);
jqTable.before($(tableDiv));
$(contentDiv).append(jqTable);
jqTableDiv.width(twidth);
jqContentDiv.width(twidth);
jqContentDiv.height(theight);
var jqTheadTds = jqTable.find("thead > tr >td");
var newTitle = "";
for(var i=0;i < $(jqTheadTds).size();i++){
var tempTd = $(jqTheadTds).get(i);
newTitle += "<span class='theadTd' style='width:"+(tempTd.clientWidth+4)+"px'>"+tempTd.innerText+"</span>"
}
jqTheadDiv.html(newTitle);
jqTable.find("thead").remove();
}
function init(){
setScrollGrid("testTable",500,200);
}
</script>
<body οnlοad="init();">
<table id="testTable" >
<thead>
<tr>
<td align="center" nowrap width="100">标题1</td>
<td align="center" nowrap width="100">标题2</td>
<td align="center" nowrap width="100">标题3</td>
<td align="center" nowrap width="100">标题4</td>
<td align="center" nowrap width="100">标题5</td>
<td align="center" nowrap width="100">标题6</td>
</tr>
</thead>
<tr>
<td align="center" nowrap width="100">date11</td>
<td align="center" nowrap width="100">date12</td>
<td align="center" nowrap width="100">date13</td>
<td align="center" nowrap width="100">date14</td>
<td align="center" nowrap width="100">date15</td>
<td align="center" nowrap width="100">date16</td>
</tr>
<tr>
<td align="center" nowrap width="100">date21</td>
<td align="center" nowrap width="100">date22</td>
<td align="center" nowrap width="100">date23</td>
<td align="center" nowrap width="100">date24</td>
<td align="center" nowrap width="100">date25</td>
<td align="center" nowrap width="100">date26</td>
</tr>
<tr>
<td align="center" nowrap width="100">date31</td>
<td align="center" nowrap width="100">date32</td>
<td align="center" nowrap width="100">date33</td>
<td align="center" nowrap width="100">date34</td>
<td align="center" nowrap width="100">date35</td>
<td align="center" nowrap width="100">date36</td>
</tr>
</body>