jQuery實現表頭固定效果的實例代碼

　　一新建一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類庫文件

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20454.html