jQuery实现表头固定效果的实例代码-javascript-IT落伍者

一新建一js文件jQuery_FixedTableHeadjs

内容如下

代码如下:
jQueryfnCloneTableHeader = function(tableId tableParentDivId) {

var obj = documentgetElementById("tableHeaderDiv" + tableId);

if (obj) {

jQuery(obj)remove();

}

var browserName = navigatorappName;

var ver = navigatorappVersion;

var browserVersion = parseFloat(versubstring(verindexOf("MSIE") + verlastIndexOf("Windows")));

var content = documentgetElementById(tableParentDivId);

var scrollWidth = contentoffsetWidth contentclientWidth;

var tableOrg = jQuery("#" + tableId)

var table = tableOrgclone();

tableattr("id" "cloneTable");

var tableClone = jQuery(tableOrg)find("tr")each(function() {

});

var tableHeader = jQuery(tableOrg)find("thead");

var tableHeaderHeight = tableHeaderheight();

tableHeaderhide();

var colsWidths = jQuery(tableOrg)find("tbody tr:first td")map(function() {

return jQuery(this)width();

});

var tableCloneCols = jQuery(table)find("thead tr:first td")

if (colsWidthssize() > ) {

for (i = ; i < tableCloneColssize(); i++) {

if (i == tableCloneColssize() ) {

if (browserVersion == )

tableCloneColseq(i)width(colsWidths[i] + scrollWidth);

else

tableCloneColseq(i)width(colsWidths[i]);

} else {

tableCloneColseq(i)width(colsWidths[i]);

}

var headerDiv = documentcreateElement("div");

headerDivappendChild(table[]);

jQuery(headerDiv)css("height" tableHeaderHeight);

jQuery(headerDiv)css("overflow" "hidden");

jQuery(headerDiv)css("zindex" "");

jQuery(headerDiv)css("width" "%");

jQuery(headerDiv)attr("id" "tableHeaderDiv" + tableId);

jQuery(headerDiv)insertBefore(tableOrgparent());

二Html实例文件

内容如下

代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "

<html xmlns="

<title>qubernet@com_jQuery实现表头固定效果（挺不错的！！！）</title>

itemList

{

border: solid px #cccccc;

overflow: hidden;

width: %;

bordercollapse: collapse;

}

itemList td

{

padding: px px px px;

color: #;

border: solid px #cccccc;

textalign: center;

lineheight: px;

}

</style>

jQuery(function() {

jQueryfnCloneTableHeader("tab" "div");

});

</script>

</head>

<body>

<thead>

<tr style="backgroundcolor: #eeeeee; margin: px; lineheight: px; fontweight: bold;

padding: px px px px;">

<td>

列

</td>

<td>

列

</td>

<td>

列

</td>

<td>

列

</td>

</tr>

</thead>

<tbody>

<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>

</tbody>

</table>

</div>

</form>

</body>

</html>

注意记得引入jQuery类库文件