这篇文章主要介绍了jQuery实现的表头固定效果,结合完整实例形式分析了jQuery基于插件实现的表头固定功能与用法,非常简单实用,需要的朋友可以参考下
本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体实现步骤如下：
一、新建一js文件jQuery_FixedTableHead.js
内容如下：
jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { var obj = document.getElementById("tableHeaderDiv" + tableId); if (obj) { jQuery(obj).remove(); } var browserName = navigator.appName; var ver = navigator.appVersion; var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows"))); var content = document.getElementById(tableParentDivId); var scrollWidth = content.offsetWidth - content.clientWidth; var tableOrg = jQuery("#" + tableId) var table = tableOrg.clone(); table.attr("id", "cloneTable"); var tableClone = jQuery(tableOrg).find("tr").each(function() { }); var tableHeader = jQuery(tableOrg).find("thead"); var tableHeaderHeight = tableHeader.height(); tableHeader.hide(); 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 (colsWidths.size() > 0) { for (i = 0; i 二、Html实例文件
内容如下：
jQuery实现表头固定效果（挺不错的！！！）