table表格固定前几列，其余的滚动

2024-01-28 22:35:22

我查了好多资料，只找到一个demo

<!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) {
            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", 2, 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>
    </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>

然后结合我们的项目来完成，用的vue,jquery虽然可以可以跟依赖一样加载到vue项目中，但是只有2.0以后的版本可以，这个demo的一些语法再1.9版本已被删除，所以只能在index.html页面引入jquery，废话不多说，上代码

html:

<table id="MyTable" border='0' cellspacing='0' cellpadding='0' class='campus_table'>
          <tbody v-for="ele in dataList" :key="ele.userid" class="pr" style="display: inline-block;">
          <tr>
            <td class="tb_header">名字</td>
            <td class="tb_header">时间</td>
            <td v-for="time in dateList" :key="time" class="tb_header"
                :class="{ 'holidays': getWeek(month,time) == '周六' || getWeek(month,time) == '周日'}">
              {{time}}日
              <p style='font-size:12px;color:#999;' v-text="getWeek(month,time)"></p>
            </td>
          </tr>
          <tr v-for="me,i in ele.time" :key="i">
            <td v-if="i == 0" :rowspan="ele.span">{{ele.name}}</td>
            <td class="abs_td">
              {{me}}
            </td>
            <td v-for="time in dateList" :key="time" class="td_hover" :class="{ 'holidays': getWeek(month,time) == '周六' || getWeek(month,time) == '周日'}" @click="$refs.newSunmerMany.showFn(ele.name,ele.userid,nowYear,month,time,me)">
            </td>
          </tr>
          </tbody>
        </table>

js:

function FixTable(TableID, FixColumnNumber, width, height) {
          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": "5",
            "background-color": "#fff"
          });
          $("#" + TableID + "_tableHead").css({
            "overflow": "hidden",
            "width": width - 17,
            "position": "relative",
            "z-index": "4",
            "background-color": "#fff"
          });
          $("#" + TableID + "_tableColumn").css({
            "overflow": "hidden",
            "height": height - 17,
            "position": "relative",
            "z-index": "4",
            "background-color": "#fff"
          });
          $("#" + TableID + "_tableData").css({
            "overflow": "scroll",
            "width": width,
            "height": height,
            "position": "relative",
            "z-index": "3"
          });
          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());
        }
        let that = this;
        let clientWidth = document.body.clientWidth - 180;
        let clientHeight = document.body.clientHeight - 300;
        setTimeout(function() {
          FixTable("MyTable", 2, clientWidth > 600? clientWidth : 600, clientHeight > 300 ? clientHeight : 300);

          let myDate = new Date();
          let month = myDate.getMonth() + 1;
          let day = myDate.getDate();
          let week = myDate.getDay();
          let classPage = document.getElementById('MyTable_tableData');
          let left = 0;
          if (month == that.month) {
            if (day > 7) {
              if (that.dateList.length - day > 7) {
                left = 80 * (day + 2 - week);
              } else {
                left = 80 * (day + 2 - week - 7);
              }
            }
            classPage.scrollLeft = left;
          }
        },0);

设置定时器是因为:

Vue 的官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了。
JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的。
JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接受到服务端传递的 JSON 数据后，再通过 Vue 将数据绑定到组件上，最后由 JQuery 进行动画处理，整个过程就如行云流水般自然。
说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。

上一篇：华为防火墙源NAT/Easy_IP配置


下一篇：学习笔记