当前位置：Gxlcms > JavaScript > js实现html table 行,列锁定的简单实例

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

时间：2021-07-01 10:21:17 帮助过：20人阅读

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

实现效果如下：

 

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title>new document</title>
  5.   <script type="text/javascript"
  6.       src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  7.   
  8.   <script type="text/javascript">
  9.     function FixTable(TableID, FixColumnNumber, width, height) {
  10.       /// <summary>
  11.       ///   锁定表头和列
  12.       ///   <para> sorex.cnblogs.com </para>
  13.       /// </summary>
  14.       /// <param name="TableID" type="String">
  15.       ///   要锁定的Table的ID
  16.       /// </param>
  17.       /// <param name="FixColumnNumber" type="Number">
  18.       ///   要锁定列的个数
  19.       /// </param>
  20.       /// <param name="width" type="Number">
  21.       ///   显示的宽度
  22.       /// </param>
  23.       /// <param name="height" type="Number">
  24.       ///   显示的高度
  25.       /// </param>
  26.       if ($("#" + TableID + "_tableLayout").length != 0) {
  27.         $("#" + TableID + "_tableLayout").before($("#" + TableID));
  28.         $("#" + TableID + "_tableLayout").empty();
  29.       }
  30.       else {
  31.         $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
  32.       }
  33.       $('<div id="' + TableID + '_tableFix"></div>'
  34.       + '<div id="' + TableID + '_tableHead"></div>'
  35.       + '<div id="' + TableID + '_tableColumn"></div>'
  36.       + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
  37.       var oldtable = $("#" + TableID);
  38.       var tableFixClone = oldtable.clone(true);
  39.       tableFixClone.attr("id", TableID + "_tableFixClone");
  40.       $("#" + TableID + "_tableFix").append(tableFixClone);
  41.       var tableHeadClone = oldtable.clone(true);
  42.       tableHeadClone.attr("id", TableID + "_tableHeadClone");
  43.       $("#" + TableID + "_tableHead").append(tableHeadClone);
  44.       var tableColumnClone = oldtable.clone(true);
  45.       tableColumnClone.attr("id", TableID + "_tableColumnClone");
  46.       $("#" + TableID + "_tableColumn").append(tableColumnClone);
  47.       $("#" + TableID + "_tableData").append(oldtable);
  48.       $("#" + TableID + "_tableLayout table").each(function () {
  49.         $(this).css("margin", "0");
  50.       });
  51.       var HeadHeight = $("#" + TableID + "_tableHead thead").height();
  52.       HeadHeight += 2;
  53.       $("#" + TableID + "_tableHead").css("height", HeadHeight);
  54.       $("#" + TableID + "_tableFix").css("height", HeadHeight);
  55.       var ColumnsWidth = 0;
  56.       var ColumnsNumber = 0;
  57.       $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
  58.         ColumnsWidth += $(this).outerWidth(true);
  59.         ColumnsNumber++;
  60.       });
  61.       ColumnsWidth += 2;
  62.       if ($.browser.msie) {
  63.         switch ($.browser.version) {
  64.           case "7.0":
  65.             if (ColumnsNumber >= 3) ColumnsWidth--;
  66.             break;
  67.           case "8.0":
  68.             if (ColumnsNumber >= 2) ColumnsWidth--;
  69.             break;
  70.         }
  71.       }
  72.       $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
  73.       $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
  74.       $("#" + TableID + "_tableData").scroll(function () {
  75.         $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
  76.         $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
  77.       });
  78.       $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
  79.       $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
  80.       $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
  81.       $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
  82.       if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
  83.         $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
  84.         $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
  85.       }
  86.       if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
  87.         $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
  88.         $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
  89.       }
  90.       $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
  91.       $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
  92.       $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
  93.       $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
  94.     }
  95. $(document).ready(function () {
  96.       FixTable("MyTable", 1, 600, 400);
  97.     });
  98.   </script>
  99. </head>
  100. <body>
  101.   <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"
  102.       id="MyTable" border="1" cellspacing="0" cellpadding="0">
  103.     <thead>
  104.       <tr>
  105.         <th style="text-align: center; width: 80px" rowspan="3">姓名</th>
  106.         <th style="text-align: center; width: 80px" rowspan="3">班级</th>
  107.         <th style="text-align: center" colspan="10">成绩</th>
  108.       </tr>
  109.       <tr>
  110.         <th style="text-align: center" colspan="3">主科</th>
  111.         <th style="text-align: center" colspan="3">文科</th>
  112.         <th style="text-align: center" colspan="3">理科</th>
  113.         <th style="text-align: center; width: 80px" rowspan="2">总分</th>
  114.       </tr>
  115.       <tr>
  116.         <th style="text-align: center; width: 80px">语文</th>
  117.         <th style="text-align: center; width: 80px">数学</th>
  118.         <th style="text-align: center; width: 80px">英语</th>
  119.         <th style="text-align: center; width: 80px">政治</th>
  120.         <th style="text-align: center; width: 80px">历史</th>
  121.         <th style="text-align: center; width: 80px">地理</th>
  122.         <th style="text-align: center; width: 80px">物理</th>
  123.         <th style="text-align: center; width: 80px">化学</th>
  124.         <th style="text-align: center; width: 80px">生物</th>
  125.       </tr>
  126.       <!--
  127.          <tr>
  128.          <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  129.                    姓名
  130.                  </th>
  131.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  132.                    班级
  133.                  </th>
  134.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  135.                    语文
  136.                  </th>
  137.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  138.                    数学
  139.                  </th>
  140.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  141.                    英语
  142.                  </th>
  143.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  144.                    政治
  145.                  </th>
  146.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  147.                    历史
  148.                  </th>
  149.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  150.                    地理
  151.                  </th>
  152.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  153.                    物理
  154.                  </th>
  155.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  156.                    化学
  157.                  </th>
  158.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  159.                    生物
  160.                  </th>
  161.                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
  162.                    总分
  163.                  </th>
  164.          </tr>
  165.        -->
  166.     </thead>
  167.     <tbody>
  168.       <!-- 数据行 -->
  169.       <tr>
  170.         <td>学生32</td>
  171.         <td>班级1</td>
  172.         <td>29</td>
  173.         <td>25</td>
  174.         <td>146</td>
  175.         <td>28</td>
  176.         <td>79</td>
  177.         <td>73</td>
  178.         <td>47</td>
  179.         <td>8</td>
  180.         <td>91</td>
  181.         <td>526</td>
  182.       </tr>
  183.       <tr>
  184.         <td>学生32</td>
  185.         <td>班级1</td>
  186.         <td>29</td>
  187.         <td>25</td>
  188.         <td>146</td>
  189.         <td>28</td>
  190.         <td>79</td>
  191.         <td>73</td>
  192.         <td>47</td>
  193.         <td>8</td>
  194.         <td>91</td>
  195.         <td>526</td>
  196.       </tr>
  197.       <tr>
  198.         <td>学生32</td>
  199.         <td>班级1</td>
  200.         <td>29</td>
  201.         <td>25</td>
  202.         <td>146</td>
  203.         <td>28</td>
  204.         <td>79</td>
  205.         <td>73</td>
  206.         <td>47</td>
  207.         <td>8</td>
  208.         <td>91</td>
  209.         <td>526</td>
  210.       </tr>
  211.       <tr>
  212.         <td>学生32</td>
  213.         <td>班级1</td>
  214.         <td>29</td>
  215.         <td>25</td>
  216.         <td>146</td>
  217.         <td>28</td>
  218.         <td>79</td>
  219.         <td>73</td>
  220.         <td>47</td>
  221.         <td>8</td>
  222.         <td>91</td>
  223.         <td>526</td>
  224.       </tr>
  225.       <tr>
  226.         <td>学生32</td>
  227.         <td>班级1</td>
  228.         <td>29</td>
  229.         <td>25</td>
  230.         <td>146</td>
  231.         <td>28</td>
  232.         <td>79</td>
  233.         <td>73</td>
  234.         <td>47</td>
  235.         <td>8</td>
  236.         <td>91</td>
  237.         <td>526</td>
  238.       </tr>
  239.       <tr>
  240.         <td>学生32</td>
  241.         <td>班级1</td>
  242.         <td>29</td>
  243.         <td>25</td>
  244.         <td>146</td>
  245.         <td>28</td>
  246.         <td>79</td>
  247.         <td>73</td>
  248.         <td>47</td>
  249.         <td>8</td>
  250.         <td>91</td>
  251.         <td>526</td>
  252.       </tr>
  253.       <tr>
  254.         <td>学生32</td>
  255.         <td>班级1</td>
  256.         <td>29</td>
  257.         <td>25</td>
  258.         <td>146</td>
  259.         <td>28</td>
  260.         <td>79</td>
  261.         <td>73</td>
  262.         <td>47</td>
  263.         <td>8</td>
  264.         <td>91</td>
  265.         <td>526</td>
  266.       </tr>
  267.       <tr>
  268.         <td>学生32</td>
  269.         <td>班级1</td>
  270.         <td>29</td>
  271.         <td>25</td>
  272.         <td>146</td>
  273.         <td>28</td>
  274.         <td>79</td>
  275.         <td>73</td>
  276.         <td>47</td>
  277.         <td>8</td>
  278.         <td>91</td>
  279.         <td>526</td>
  280.       </tr>
  281.       <tr>
  282.         <td>学生32</td>
  283.         <td>班级1</td>
  284.         <td>29</td>
  285.         <td>25</td>
  286.         <td>146</td>
  287.         <td>28</td>
  288.         <td>79</td>
  289.         <td>73</td>
  290.         <td>47</td>
  291.         <td>8</td>
  292.         <td>91</td>
  293.         <td>526</td>
  294.       </tr>
  295.       <tr>
  296.         <td>学生32</td>
  297.         <td>班级1</td>
  298.         <td>29</td>
  299.         <td>25</td>
  300.         <td>146</td>
  301.         <td>28</td>
  302.         <td>79</td>
  303.         <td>73</td>
  304.         <td>47</td>
  305.         <td>8</td>
  306.         <td>91</td>
  307.         <td>526</td>
  308.       </tr>
  309.       <tr>
  310.         <td>学生32</td>
  311.         <td>班级1</td>
  312.         <td>29</td>
  313.         <td>25</td>
  314.         <td>146</td>
  315.         <td>28</td>
  316.         <td>79</td>
  317.         <td>73</td>
  318.         <td>47</td>
  319.         <td>8</td>
  320.         <td>91</td>
  321.         <td>526</td>
  322.       </tr>
  323.       <tr>
  324.         <td>学生32</td>
  325.         <td>班级1</td>
  326.         <td>29</td>
  327.         <td>25</td>
  328.         <td>146</td>
  329.         <td>28</td>
  330.         <td>79</td>
  331.         <td>73</td>
  332.         <td>47</td>
  333.         <td>8</td>
  334.         <td>91</td>
  335.         <td>526</td>
  336.       </tr>
  337.       <tr>
  338.         <td>学生32</td>
  339.         <td>班级1</td>
  340.         <td>29</td>
  341.         <td>25</td>
  342.         <td>146</td>
  343.         <td>28</td>
  344.         <td>79</td>
  345.         <td>73</td>
  346.         <td>47</td>
  347.         <td>8</td>
  348.         <td>91</td>
  349.         <td>526</td>
  350.       </tr>
  351.       <tr>
  352.         <td>学生32</td>
  353.         <td>班级1</td>
  354.         <td>29</td>
  355.         <td>25</td>
  356.         <td>146</td>
  357.         <td>28</td>
  358.         <td>79</td>
  359.         <td>73</td>
  360.         <td>47</td>
  361.         <td>8</td>
  362.         <td>91</td>
  363.         <td>526</td>
  364.       </tr>
  365.       <tr>
  366.         <td>学生32</td>
  367.         <td>班级1</td>
  368.         <td>29</td>
  369.         <td>25</td>
  370.         <td>146</td>
  371.         <td>28</td>
  372.         <td>79</td>
  373.         <td>73</td>
  374.         <td>47</td>
  375.         <td>8</td>
  376.         <td>91</td>
  377.         <td>526</td>
  378.       </tr>
  379.       <tr>
  380.         <td>学生32</td>
  381.         <td>班级1</td>
  382.         <td>29</td>
  383.         <td>25</td>
  384.         <td>146</td>
  385.         <td>28</td>
  386.         <td>79</td>
  387.         <td>73</td>
  388.         <td>47</td>
  389.         <td>8</td>
  390.         <td>91</td>
  391.         <td>526</td>
  392.       </tr>
  393.     </tbody>
  394.   </table>
  395. </body>
  396. </html>

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！