首页
所有分类
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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
javascript 混合的构造函数和原型方式，动态原型方式
Dec 07 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
微信小程序 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
R9700(1) SONY600GR(1) 根德5570(1) DE1107(3) frg-100(1) DE1105(1) YAESU(1) WR-800F(1) 239军机(1) DE1103(2)
You might like
php 代码优化之经典示例
2011/03/24 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
JS设计模式之单例模式（一）
2017/09/29 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python的几种开发工具介绍
2007/03/07 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python二元表达式用法
2019/12/04 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
python中添加模块导入路径的方法
2021/02/03 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
高中家长寄语
2014/04/02 职场文书
股东授权委托书范文
2014/09/13 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
干部个人考察材料
2014/12/24 职场文书
公司员工手册范本
2015/05/14 职场文书
锦旗赠语
2015/06/23 职场文书
Mysql Show Profile
2021/04/05 MySQL
python 中[0]*2与0*2的区别说明
2021/05/10 Python