jQuery实现的表头固定效果实例【附完整demo源码下载】

前端之家收集整理的这篇文章主要介绍了jQuery实现的表头固定效果实例【附完整demo源码下载】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了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实例文件

内容如下:

jQuery实现表头固定<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>(挺不错的!!!)