首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

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

具体实现步骤如下：

一、新建一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实现的表头固定效果实例【附完整demo源码下载】

- Author -

Quber

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
jsPDF导出pdf示例
May 02 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
javascript实现密码强度显示
Mar 18 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JS返回顶部实例代码
Aug 09 Javascript
移动端H5页面返回并刷新页面（BFcache）的方法
Nov 06 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 #Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 #Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 #Javascript
AngularJS基础 ng-href 指令用法
Aug 01 #Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 #Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 #Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 #Javascript
柱状图(1) GCN(1) SFTP(3) 追加文本(1) Pytesseract(1) 文字识别(1) 验证码(1) 匹配文本(1) PIL(1) GNN(1)
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jquery实现拖动效果
2016/08/10 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
javascript实现视频弹幕效果（两个版本）
2019/11/28 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20：TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Django开发中复选框用法示例
2018/03/20 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Django封装交互接口代码
2020/07/12 Python
ALDI奥乐齐官方海外旗舰店：德国百年超市
2017/12/27 全球购物
什么是serialVersionUID
2016/03/04 面试题
大专生自我鉴定范文
2013/10/01 职场文书
家长对小学生的评语
2014/01/28 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
小浪底导游词
2015/02/12 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
安全伴我行主题班会
2015/08/13 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python