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

js实现html table 行,列锁定的简单实例

Posted in Javascript onOctober 13, 2016

js实现html table 表头，指定列锁定

实现效果如下：

 js实现html table 行,列锁定的简单实例

 感兴趣的朋友可以直接复制出来运行看效果。

<!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">
<head>
  <title>new document</title>
  <script type="text/javascript"
      src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  
  <script type="text/javascript">
    function FixTable(TableID, FixColumnNumber, width, height) {
      /// <summary>
      ///   锁定表头和列
      ///   <para> sorex.cnblogs.com </para>
      /// </summary>
      /// <param name="TableID" type="String">
      ///   要锁定的Table的ID
      /// </param>
      /// <param name="FixColumnNumber" type="Number">
      ///   要锁定列的个数
      /// </param>
      /// <param name="width" type="Number">
      ///   显示的宽度
      /// </param>
      /// <param name="height" type="Number">
      ///   显示的高度
      /// </param>
      if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
      }
      else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
      }
      $('<div id="' + TableID + '_tableFix"></div>'
      + '<div id="' + TableID + '_tableHead"></div>'
      + '<div id="' + TableID + '_tableColumn"></div>'
      + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
      var oldtable = $("#" + TableID);
      var tableFixClone = oldtable.clone(true);
      tableFixClone.attr("id", TableID + "_tableFixClone");
      $("#" + TableID + "_tableFix").append(tableFixClone);
      var tableHeadClone = oldtable.clone(true);
      tableHeadClone.attr("id", TableID + "_tableHeadClone");
      $("#" + TableID + "_tableHead").append(tableHeadClone);
      var tableColumnClone = oldtable.clone(true);
      tableColumnClone.attr("id", TableID + "_tableColumnClone");
      $("#" + TableID + "_tableColumn").append(tableColumnClone);
      $("#" + TableID + "_tableData").append(oldtable);
      $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
      });
      var HeadHeight = $("#" + TableID + "_tableHead thead").height();
      HeadHeight += 2;
      $("#" + TableID + "_tableHead").css("height", HeadHeight);
      $("#" + TableID + "_tableFix").css("height", HeadHeight);
      var ColumnsWidth = 0;
      var ColumnsNumber = 0;
      $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
      });
      ColumnsWidth += 2;
      if ($.browser.msie) {
        switch ($.browser.version) {
          case "7.0":
            if (ColumnsNumber >= 3) ColumnsWidth--;
            break;
          case "8.0":
            if (ColumnsNumber >= 2) ColumnsWidth--;
            break;
        }
      }
      $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
      $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
      $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
      });
      $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
      $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
      $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
      $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
      if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
      }
      if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
      }
      $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
      $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
      $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
      $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
    }
$(document).ready(function () {
      FixTable("MyTable", 1, 600, 400);
    });
  </script>
</head>
<body>
  <table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
      id="MyTable" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th style="text-align: center; width: 80px" rowspan="3">姓名</th>
        <th style="text-align: center; width: 80px" rowspan="3">班级</th>
        <th style="text-align: center" colspan="10">成绩</th>
      </tr>
      <tr>
        <th style="text-align: center" colspan="3">主科</th>
        <th style="text-align: center" colspan="3">文科</th>
        <th style="text-align: center" colspan="3">理科</th>
        <th style="text-align: center; width: 80px" rowspan="2">总分</th>
      </tr>
      <tr>
        <th style="text-align: center; width: 80px">语文</th>
        <th style="text-align: center; width: 80px">数学</th>
        <th style="text-align: center; width: 80px">英语</th>
        <th style="text-align: center; width: 80px">政治</th>
        <th style="text-align: center; width: 80px">历史</th>
        <th style="text-align: center; width: 80px">地理</th>
        <th style="text-align: center; width: 80px">物理</th>
        <th style="text-align: center; width: 80px">化学</th>
        <th style="text-align: center; width: 80px">生物</th>
      </tr>
      <!--
         <tr>
         <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   姓名
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   班级
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   语文
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   数学
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   英语
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   政治
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   历史
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   地理
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   物理
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   化学
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   生物
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   总分
                 </th>

         </tr>
       -->
    </thead>
    <tbody>
      <!-- 数据行 -->
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
      <tr>
        <td>学生32</td>
        <td>班级1</td>
        <td>29</td>
        <td>25</td>
        <td>146</td>
        <td>28</td>
        <td>79</td>
        <td>73</td>
        <td>47</td>
        <td>8</td>
        <td>91</td>
        <td>526</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

以上就是小编为大家带来的js实现html table 行,列锁定的简单实例全部内容了，希望大家多多支持三水点靠木~

js实现html table 行,列锁定的简单实例

- Author -

jingxian

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

Javascript 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
angular2实现统一的http请求头方法
Aug 13 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 #Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 #Javascript
使用jquery如何获取时间
Oct 13 #Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 #Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 #Javascript
js给table赋值的实例代码
Oct 13 #Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
内存(1) PV(1) ipv6(1) 弱口令(1) 线程(1) 访问日志(2) jenkins(1) 连接数(1) 进程假死(1) UV(1)
You might like
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
vue实现计算器功能
2020/02/22 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Django CBV类的用法详解
2019/07/26 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python爬虫 正则表达式解析
2019/09/28 Python
python 实现return返回多个值
2019/11/19 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Daniel Wellington官方海外旗舰店：丹尼尔惠灵顿DW手表
2018/02/22 全球购物
MAC彩妆澳洲官网：M·A·C AU
2021/01/17 全球购物
weblogic面试题
2016/03/07 面试题
营销总经理的岗位职责
2013/12/15 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
干部作风建设心得体会
2014/10/22 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
义诊活动通知
2015/04/24 职场文书
民事诉讼代理词
2015/05/25 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
十大最强水系宝可梦，最美宝可梦排第三，榜首大家最熟悉
2022/03/18 日漫