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

2019-11-20 09:20:52

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/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 #cccccc;        overflow: hidden;        width: 100%;        border-collapse: collapse;    }    .itemList td    {        padding: 0px 0px 0px 0px;        color: #444444;        border: solid 1px #cccccc;        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表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查

下一篇：AngularJS基础 ng-if 指令用法