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

2022-10-22 15:39:10

我查了好多资料，只找到一个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 优化。

上一篇：快速傅立叶变换FFT模板


下一篇：fullpage.js 结合固定导航栏—实现定位导航栏