源码网商城，靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

申请开店
全部源码分类
首页 源码街 任务需求 版权中心 备案服务 商家入驻

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

  • 时间：2020-06-18 15:29 编辑： 来源： 阅读：
  • 扫一扫，手机访问
摘要：jQuery实现的表头固定效果实例【附完整demo源码下载】
本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考，具体如下： 运行效果截图如下： [img]http://files.jb51.net/file_images/article/201608/201681155453591.jpg?201671155521[/img] 具体实现步骤如下： [b]一、新建一js文件jQuery_FixedTableHead.js[/b] 内容如下： 
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());
}
[b]二、Html实例文件[/b] 内容如下： 
<!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>
完整实例代码点击此处[url=http://xiazai.jb51.net/201608/yuanma/jquery-fixed-table-title-plugs-codes(jb51.net).rar]本站下载[/url]。 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/539.htm]jQuery表格(table)操作技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/449.htm]jQuery form操作技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/294.htm]jQuery操作json数据技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/93.htm]jquery中Ajax用法总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》 希望本文所述对大家jQuery程序设计有所帮助。
  • 全部评论(0)
上一篇：使用jQuery仿苹果官网焦点图特效
下一篇：详谈jQuery.load()和Jsp的include的区别
关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2      苏公网安备32050702011978号      增值电信业务经营许可证编号：苏B2-20251499   |  Copyright 2018 - 2025   源码网商城 (www.ymwmall.com) 版权所有

联系客服
客服电话：
400-000-3129
微信版

扫一扫进微信版
返回顶部