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

好的，以下是一个实现固定表头和锁定前几列的 JS 代码示例：

// 获取表格元素
var table = document.getElementById("myTable");

// 获取表头元素
var header = table.getElementsByTagName("thead")[0];

// 获取表格内容元素
var body = table.getElementsByTagName("tbody")[0];

// 获取表头中所有列
var headerCells = header.getElementsByTagName("th");

// 获取需要锁定的列数
var lockCount = 2; // 这里以锁定前两列为例

// 创建一个新的表头元素
var newHeader = document.createElement("thead");

// 创建一个新的表格行元素
var headerRow = document.createElement("tr");

// 将需要锁定的列添加到新的表头行中
for (var i = 0; i < lockCount; i++) {
  headerRow.appendChild(headerCells[i].cloneNode(true));
}

// 将新的表头行添加到新的表头元素中
newHeader.appendChild(headerRow);

// 将新的表头元素添加到表格中
table.insertBefore(newHeader, table.firstChild);

// 获取新的表头行中所有列
var newHeaderCells = newHeader.getElementsByTagName("th");

// 设置新的表头行中所有列的宽度和高度与原表头行中所有列相同
for (var i = 0; i < newHeaderCells.length; i++) {
  newHeaderCells[i].style.width = headerCells[i].offsetWidth + "px";
  newHeaderCells[i].style.height = headerCells[i].offsetHeight + "px";
}

// 设置表格内容元素的样式，使其可以滚动
body.style.overflowY = "scroll";
body.style.height = "200px"; // 这里以高度为200px为例

// 监听表格内容元素的滚动事件，使新的表头行可以跟随滚动
body.onscroll = function () {
  newHeader.style.transform = "translateY(" + body.scrollTop + "px)";
};

以上代码实现了锁定表格前两列并固定表头的效果，你可以根据自己的需要调整锁定列数和表格样式。