首页
所有分类
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 相关文章推荐
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
浅谈jQuery异步对象（XMLHttpRequest）
Nov 17 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 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) 底部导航(1) 计算器(5) 对齐打印(1) 五子棋(12) Springboot-cli(1) CompletableFuture(1) 异步回调(1) format(1) 图像处理(1)
You might like
php获取目录所有文件并将结果保存到数组（实例）
2013/10/25 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php取出数组单个值的方法
2018/03/12 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JavaScript中数据结构与算法(四)：串(BF)
2015/06/19 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
解析Python中while true的使用
2015/10/13 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
JSON Web Tokens的实现原理
2017/04/02 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
ProBikeKit澳大利亚：自行车套件，跑步和铁人三项装备
2016/11/30 全球购物
Gap工厂店：Gap Factory
2017/11/02 全球购物
豪华床上用品、床单和浴室必需品：Peacock Alley
2019/09/04 全球购物
Zalando Lounge瑞士：时尚与生活方式购物俱乐部
2020/03/12 全球购物
电气专业推荐信范文
2013/11/18 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏