JS实现的表头列头固定页面功能示例

以下是“JS实现的表头列头固定页面功能示例”的完整攻略：

1. 准备工作

在使用JS实现表头列头固定功能之前，需要先对页面进行一些准备工作。首先，你需要在你的HTML文件中将表格封装在一个div盒子中，如下所示：

<div class="table-container">
  <table>
    <!--表格内容-->
  </table>
</div>

接下来，需要在CSS文件中对该div盒子进行设置，使其具有固定的宽度和高度，并且具有滚动条的效果，如下所示：

.table-container {
  width: 100%;
  height: 300px;
  overflow: auto;
}

2. 实现表头固定

在HTML文件中，表头是由<thead>标签表示的，该标签中包含了表头的各个列。我们可以通过JS代码将<thead>中的内容固定在页面的顶部，实现表头固定的效果。

首先，需要使用JS获取到<thead>标签的位置信息以及表格的宽度信息，如下所示：

let tableHeader = document.querySelector('thead');
let tableRect = document.querySelector('table').getBoundingClientRect();

然后，我们可以将<thead>标签在页面中进行固定，使其始终处于页面的顶部位置，如下所示：

window.addEventListener('scroll', function() {
  if (window.scrollY >= tableRect.top) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
    tableHeader.style.left = tableRect.left + "px";
    tableHeader.style.width = tableRect.width + "px";
  } else {
    tableHeader.style.position = 'static';
  }
});

其中，window.addEventListener代码块表示当页面发生滚动事件时，执行内部的函数代码块，该函数会判断当前滚动的位置是否超过了<thead>标签所在的位置，如果滚动位置超过了则将<thead>标签设置为固定定位，并设置其位置、宽度等CSS属性值；如果滚动位置未超过则将<thead>标签恢复为默认的静态定位。

3. 实现列头固定

和表头固定类似，实现列头固定的过程也是通过JS代码来实现的。不同的是，列头是由每一个<th>标签表示的，我们需要对每一个<th>标签进行固定。

首先，需要在每个<th>标签上添加一个额外的div，将<th>中的内容进行封装，如下所示：

<thead>
  <tr>
    <th><div>名称</div></th>
    <th><div>价格</div></th>
    <th><div>库存</div></th>
    <!--其他列-->
  </tr>
</thead>

然后，需要对每个<th>标签上的div进行定位，使其始终出现在页面的左侧位置，如下所示：

let tableHeaders = document.querySelectorAll('thead th');
let tableContainer = document.querySelector('.table-container');

for (let i = 0; i < tableHeaders.length; i++) {
  let div = tableHeaders[i].querySelector('div');
  div.style.position = 'absolute';
  div.style.top = '0';
  div.style.left = tableHeaders[i].getBoundingClientRect().left
                - tableRect.left + "px";
}

其中，document.querySelectorAll代码块表示获取到所有的<th>标签，在遍历时对每个<th>标签中额外添加的div进行设置CSS属性值。为了实现div的固定定位效果，我们需要设置其position属性为absolute，并且通过getBoundingClientRect()方法获取该<th>标签的位置信息，计算出div的left值，使其始终位于页面的左侧。

4. 示例说明

示例1：西游记人物表格

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th><div>姓名</div></th>
        <th><div>性别</div></th>
        <th><div>技能</div></th>
        <th><div>战力</div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div>孙悟空</div></td>
        <td><div>男</div></td>
        <td><div>七十二变，筋斗云</div></td>
        <td><div>8888</div></td>
      </tr>
      <!--其他行-->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  height: 300px;
  overflow: auto;
}

let tableHeader = document.querySelector('thead');
let tableHeaders = document.querySelectorAll('thead th');
let tableRect = document.querySelector('table').getBoundingClientRect();
let tableContainer = document.querySelector('.table-container');

window.addEventListener('scroll', function() {
  if (window.scrollY >= tableRect.top) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
    tableHeader.style.left = tableRect.left + "px";
    tableHeader.style.width = tableRect.width + "px";
  } else {
    tableHeader.style.position = 'static';
  }

  for (let i = 0; i < tableHeaders.length; i++) {
    let div = tableHeaders[i].querySelector('div');
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = tableHeaders[i].getBoundingClientRect().left
                  - tableRect.left + "px";
  }
});

在该示例中，我们通过实现表头列头固定功能，将人物表格的表头和列头始终显示在页面上，方便用户查看数据。

示例2：车站时刻表

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th><div>车次</div></th>
        <th><div>出发站</div></th>
        <th><div>到达站</div></th>
        <th><div>发车时间</div></th>
        <th><div>到达时间</div></th>
        <th><div>历时</div></th>
        <th><div>票价</div></th>
        <th><div>数量</div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div>G2</div></td>
        <td><div>北京南</div></td>
        <td><div>上海虹桥</div></td>
        <td><div>08:00</div></td>
        <td><div>14:00</div></td>
        <td><div>6小时</div></td>
        <td><div>¥553</div></td>
        <td><div>12张</div></td>
      </tr>
      <!--其他行-->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  height: 400px;
  overflow: auto;
}

let tableHeader = document.querySelector('thead');
let tableHeaders = document.querySelectorAll('thead th');
let tableRect = document.querySelector('table').getBoundingClientRect();
let tableContainer = document.querySelector('.table-container');

window.addEventListener('scroll', function() {
  if (window.scrollY >= tableRect.top) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
    tableHeader.style.left = tableRect.left + "px";
    tableHeader.style.width = tableRect.width + "px";
  } else {
    tableHeader.style.position = 'static';
  }

  for (let i = 0; i < tableHeaders.length; i++) {
    let div = tableHeaders[i].querySelector('div');
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = tableHeaders[i].getBoundingClientRect().left
                  - tableRect.left + "px";
  }
});

在该示例中，我们通过实现表头列头固定功能，将车站时刻表的表头和列头始终显示在页面上，方便用户查看数据。当时刻表数据较多时，用户可以通过滚动表格来浏览所有的数据，而不会失去表头和列头的信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的表头列头固定页面功能示例 - Python技术站