jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】

更新時(shí)間：2016年08月01日 15:54:43 作者：Quber

這篇文章主要介紹了jQuery實(shí)現(xiàn)的表頭固定效果,結(jié)合完整實(shí)例形式分析了jQuery基于插件實(shí)現(xiàn)的表頭固定功能與用法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的表頭固定效果。分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

具體實(shí)現(xiàn)步驟如下：

一、新建一js文件jQuery_FixedTableHead.js

內(nèi)容如下：

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實(shí)例文件

內(nèi)容如下：

<!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實(shí)現(xiàn)表頭固定效果（挺不錯(cuò)的?。。。?lt;/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>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
        <tr><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td><td>我是測(cè)試的數(shù)據(jù)行…………</td></tr>
      </tbody>
    </table>
  </div>
  </form>
</body>
</html>

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: