固定表头/锁定前几列的代码参考[JS篇]

要实现固定表头或锁定前几列的功能，可以通过以下几种方式来实现：

1. 使用 CSS 的 `position: sticky` 属性

这种方法只需要在 CSS 中设置表头或前几列的样式，将它们的 `position` 属性设置为 `sticky`，然后再设置 `top` 或 `left` 属性的值即可。具体代码如下：

thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

tbody td:first-child,
thead th:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 1;
}

2. 使用 JavaScript 监听滚动事件

这种方法需要使用 JavaScript 监听表格的滚动事件，然后在滚动事件触发时更新表头或前几列的位置。具体代码如下：

// 获取表头和前几列的元素
var header = document.querySelector('thead');
var leftColumns = document.querySelectorAll('tbody td:first-child');

// 监听表格的滚动事件
document.querySelector('table').addEventListener('scroll', function(e) {
  // 计算表头和前几列应该移动的距离
  var distance = this.scrollTop;
  
  // 移动表头和前几列的位置
  header.style.transform = 'translateY(' + distance + 'px)';
  for (var i = 0; i < leftColumns.length; i++) {
    leftColumns[i].style.transform = 'translateX(' + this.scrollLeft + 'px)';
  }
});

以上两种方法都可以实现表格固定表头或锁定前几列的功能，具体使用哪种方法可以根据实际情况来选择。