jQuery实现的表头固定效果实例【附完整demo源码下
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了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 < 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实例文件
内容如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现表头固定效果(挺不错的!!!)</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jQuery_FixedTableHead.js" type="text/javascript"></script> <style type="text/css"> .itemList { border: solid 1px #; overflow: hidden; width: 100%; border-collapse: collapse; } .itemList td { padding: 0px 0px 0px 0px; color: #444444; border: solid 1px #; text-align: center; line-height: 20px; } </style> <script type="text/javascript"> jQuery(function() { jQuery.fn.CloneTableHeader("tab1", "div1"); }); </script> </head> <body> <form id="form1" runat="server"> <div style=" height: 250px; overflow:scroll;" id="div1"> <table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList"> <thead> <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;"> <td> 列1 </td> <td> 列2 </td> <td> 列3 </td> <td> 列4 </td> </tr> </thead> <tbody> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> </tbody> </table> </div> </form> </body> </html>
完整实例代码点击此处。
更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程