首页
所有分类
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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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
403(1) 404(1) XPathParser(1) csgo(1) macos(1) sout(1) CAD(1) Sentry(1) Stater(1) xps(1)
You might like
php 时间计算问题小结
2009/01/04 PHP
php xml文件操作代码（一）
2009/03/20 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
Js从头学起（基本数据类型和引用类型的参数传递详细分析）
2012/02/16 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
React组件的三种写法总结
2017/01/12 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
美国美妆网站：B-Glowing
2016/10/12 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
新学期标语
2014/06/30 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
大学生求职信怎么写
2015/03/19 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
python实现监听键盘
2021/04/26 Python