怎么用js控制html里的table让某列固定，实现类似Excel里列固定的效果

Posted 2023-04-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用js控制html里的table让某列固定，实现类似Excel里列固定的效果相关的知识，希望对你有一定的参考价值。

参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";>
<html xmlns=";>
<head>
<style type='text/css'>
body
width:140px;
height:200px;
margin:160px auto;

</style>
</head>
<body>
<div>
<div style="overflow:auto;height:209px;width:140px;position:relative;border-bottom:1px solid #333" id="tb">
<table border="1" id="tbl"$amp;>amp;$lt;tr$amp;>amp;$lt;td colspan=2 style="width:114px;">sdfsdfdf</td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs1</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs2</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs3</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs4</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs5</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs6</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs7</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs8</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdfs9</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdf10</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdf11</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;tr$amp;>amp;$lt;td>sdfsdf12</td$amp;>amp;$lt;td$amp;>amp;$lt;img src='images/close.gif' /$amp;>amp;$lt;/td$amp;>amp;$lt;/tr$amp;>amp;$lt;/table>
</div>
<table border="1" id="aaa" style="position:absolute;top:160px;background:#ffffff;"$amp;>amp;$lt;tr$amp;>amp;$lt;td colspan=2 style="width:114px">sdfsdfdf</td$amp;>amp;$lt;/tr$amp;>amp;$lt;/table>
</div>
</body>
</html>
<script type='text/javascript'>

onload = init;
function init()
var imgs = document.getElementById("tb").getElementsByTagName("img");
for(var i=0;i<imgs.length;i++)
imgs[i].onclick = changeSp;

function changeSp()
if(this.flg)
this.flg = false;
this.src = "images/close.gif";
else
this.flg = true;
this.src = "images/open.gif";

var imgs = document.getElementById("tb").getElementsByTagName("img");
for(var i=0;i<imgs.length;i++)
if(!imgs[i].flg)
document.getElementById("tbl").tBodies[0].insertBefore(this.parentNode.parentNode, imgs[i].parentNode.parentNode);
break;

imgs[i].onclick = changeSp;

updataSld();

function updataSld()
var imgs = document.getElementById("tb").getElementsByTagName("img");
document.getElementById("aaa").tBodies[0].innerText document.getElementById("aaa").tBodies[0].innerText= "" :document.getElementById("aaa").tBodies[0].innerHTML ="";
var tr0 = document.getElementById("tbl").tBodies[0].rows[0].cloneNode(true);
tr0.style.background = "#ffffff";
document.getElementById("aaa").tBodies[0].appendChild(tr0);
for(var i=0;i<imgs.length;i++)
if(imgs[i].flg)
var a = imgs[i].parentNode.parentNode.cloneNode(true);

原生 jshtml 写一个有固定列滚动的 table

原生 js、html 写一个有固定列滚动的 table

像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。

接下来直接用 html 和 js 来尝试一下这种 table 的效果。

一：固定列
这里我想使用position: sticky;直接达到相对 table 列的固定效果，不需要改变 dom 的结构。
二：阴影
阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；当 table 往左边滚，则右固定列显示阴影；如果同时设置左右列都固定，则临界边不显示阴影而滚动到中间两侧固定列都显示阴影。
这里我打算通过监听 table 的滚动来控制阴影的展示。
三：高度
因为直接对 table 进行样式更改，不会改变 table 的 dom 结构，会保留 table 原有的“一列行高变化其它列行高也变化”效果。
四：border 样式
不使用 table 自带样式（太丑了），随便写几句美化一下。

左边列固定滚动的table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .table {
        width: 700px;
      }
      .table-container {
        position: relative;
        overflow: scroll;
      }
      .table .table-container table {
        width: max-content;
      }
      .table table tr {
        position: relative;
      }

      .table table td {
        border-bottom: 1px solid #ebeef5;
        height: 38px;
        font-size: 14px;
        color: #666;
      }
      .table .table-container .fixed {
        position: sticky;
        left: 0;
        background-color: #fff;
      }

      .table .table-container .fixed::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        width: 30px;
        transform: translateX(100%);
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
      }

      .table .table-container .box-shadow::after {
        box-shadow: rgba(0, 0, 0, 0.12) 10px 0px 8px -8px inset;
      }
    </style>
  </head>
  <body>
    <div class="table">
      <div class="table-container">
        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td width="150" class="fixed">姓名</td>
              <td width="150">类别</td>
              <td width="150">年龄</td>
              <td width="150">身高</td>
              <td width="150">体重</td>
              <td width="150">肤色</td>
              <td width="150">牙齿</td>
              <td width="150">健康</td>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td class="fixed">张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
            <tr>
              <td class="fixed">张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      window.onload = function () {
        let doc = document.getElementsByClassName("table-container")[0];
        let leftFixs = doc.getElementsByClassName("fixed");

        doc.addEventListener(
          "scroll",
          function (e) {
            if (e.target.scrollLeft > 0) {
              [...leftFixs].forEach((item) => {
                item.classList.add("box-shadow");
              });
            } else {
              [...leftFixs].forEach((item) => {
                item.classList.remove("box-shadow");
              });
            }
          },
          true
        );
      };
    </script>
  </body>
</html>

右边列固定滚动的table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .table {
      width: 700px;      
    }
    .table-container {
      position: relative;
      overflow: scroll;

    }
    .table .table-container table {
      width: max-content;
    }
    .table table tr{
      position: relative;
    }

    .table table td{
      border-bottom: 1px solid #ebeef5;
      height: 38px;
      font-size: 14px;
      color: #666;
      padding: 2px;
    }
    .table .table-container .fixed {
      position: sticky;
      right: 0;
      background-color: #fff;
    }

    .table .table-container .fixed::before {
      position: absolute;
      top: 0;
      bottom: -1px;
      left: 0;
      width: 30px;
      transform: translateX(-100%);
      transition: box-shadow .3s;
      content: '';
      pointer-events: none;
    }

    .table .table-container .box-shadow::before {
      box-shadow: rgba(0,0,0,0.12) -10px 0 8px -8px inset;
    }

  </style>
</head>
<body>
  <div class="table">

    <div class="table-container">

        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td width="150">姓名</td>
              <td width="150">类别</td>
              <td width="150">年龄</td>
              <td width="150">身高</td>
              <td width="150">体重</td>
              <td width="150">肤色</td>
              <td width="150">牙齿</td>
              <td width="150" class="fixed">健康</td>
            </tr>
          </thead>
    
          <tbody>
            <tr>
              <td>张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td class="fixed">良好</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td class="fixed">良好</td>
            </tr>
          </tbody>
        </table>

    </div>
   
  </div>
  <script>
    window.onload = function () {
      let doc = document.getElementsByClassName('table-container')[0]

      let rightFixs = doc.getElementsByClassName('fixed')

      let table = doc.getElementsByTagName('table')[0]

      doc.addEventListener('scroll', function(e) {

        if (e.target.scrollLeft < table.clientWidth - doc.clientWidth) {
          [...rightFixs].forEach(item => {
            item.classList.add('box-shadow')
          })
        } else {
          [...rightFixs].forEach(item => {
            item.classList.remove('box-shadow')
          })
        }
      }, true)
    }
  </script>
</body>
</html>

以上是关于怎么用js控制html里的table让某列固定，实现类似Excel里列固定的效果的主要内容，如果未能解决你的问题，请参考以下文章

怎么用js获取table中的td里的控件值？

怎么用simple html dom获取div块内table里的tr数据

winform datagridview 设置交叉色后，再改变某列背景色问题

JS怎么复制table里的td

如何固定table的第一行，不随纵向滚动条滚动，但能横向滚动

datagridview绑定后我想让某一格里的某几个字变颜色，怎么实现