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

其他 2019-02-12 16:54:39 阅读次数: 0

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

猜你喜欢

转载自www.cnblogs.com/mxyr/p/10365727.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022