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实例文件

内容如下：

    .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;
    }




  

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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