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

实现固定表头/锁定前几列的方法主要是通过CSS和JS来实现。

CSS部分：

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

/* 固定表头 */
thead {
  position: sticky;
  top: 0;
}

/* 锁定前两列 */
td:nth-child(-n+2) {
  position: sticky;
  left: 0;
  background-color: #ddd;
}

JS部分：

window.onscroll = function() {
  var tableHeader = document.querySelector("thead");
  var firstTwoCols = document.querySelectorAll("td:nth-child(-n+2)");
  
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  
  if (scrollTop > 0) {
    tableHeader.classList.add("sticky");
    firstTwoCols.forEach(function(col) {
      col.classList.add("sticky");
    });
  } else {
    tableHeader.classList.remove("sticky");
    firstTwoCols.forEach(function(col) {
      col.classList.remove("sticky");
    });
  }
};

以上代码实现了固定表头以及锁定前两列的功能，你可以根据需求修改CSS样式和JS逻辑。