本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体实现步骤如下:
一、新建一js文件jQuery_FixedTableHead.js
内容如下:
0) {
for (i = 0; i < tableCloneCols.size(); i++) {
if (i == tableCloneCols.size() - 1) {
if (browserVersion == 8.0)
tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth);
else
tableCloneCols.eq(i).width(colsWidths[i]);
} else {
tableCloneCols.eq(i).width(colsWidths[i]);
}
}
}
var headerDiv = document.createElement("div");
headerDiv.appendChild(table[0]);
jQuery(headerDiv).css("height",tableHeaderHeight);
jQuery(headerDiv).css("overflow","hidden");
jQuery(headerDiv).css("z-index","20");
jQuery(headerDiv).css("width","100%");
jQuery(headerDiv).attr("id","tableHeaderDiv" + tableId);
jQuery(headerDiv).insertBefore(tableOrg.parent());
}
二、Html实例文件
内容如下: