首页
所有分类
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 相关文章推荐
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
详解js的事件代理（委托）
Dec 22 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JavaScript实现移动端拖动元素
Nov 24 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
反向代理(2) 前后端分离(1) 二级域名(1) 默认端口(3) 防盗链(1) reload(1) 压力测试(1) 负载均衡(6) shell(3) 生成缩略图(1)
You might like
用PHP书写安全的脚本代码
2012/02/05 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
基于jQuery的弹出警告对话框美化插件(警告，确认和提示)
2010/06/10 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
JavaScript lastIndexOf方法入门实例（计算指定字符在字符串中最后一次出现的位置）
2014/10/17 Javascript
常用的javascript设计模式
2017/01/11 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JS设计模式之单例模式（一）
2017/09/29 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
webpack多页面开发实践
2017/12/18 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序入门之指南针
2020/10/22 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python中返回矩阵的行列方法
2018/04/04 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
python如何构建mock接口服务
2021/01/28 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
印度尼西亚在线时尚购物网站：ZALORA印尼
2016/08/02 全球购物
德国自然时尚和有机产品购物网站：Waschbär
2019/05/29 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
电子商务专业学生的学习自我评价
2013/10/27 职场文书
企业宣传方案
2014/03/04 职场文书
培训科主任岗位职责
2014/08/08 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python