您的位置：首页 > Web前端 > JQuery

利用Jquery实现表头固

2008-06-26 17:40 344 查看

最近在网上看到一段十分精简的实现表头固定的脚本，刚好项目中需要，于是利用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 onload="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航