固定表头/锁定前几列的代码参考[JS篇]
时间: 2023-10-11 15:10:38 浏览: 44
要实现固定表头或锁定前几列的功能,可以通过以下几种方式来实现:
1. 使用 CSS 的 `position: sticky` 属性
这种方法只需要在 CSS 中设置表头或前几列的样式,将它们的 `position` 属性设置为 `sticky`,然后再设置 `top` 或 `left` 属性的值即可。具体代码如下:
```css
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 监听表格的滚动事件,然后在滚动事件触发时更新表头或前几列的位置。具体代码如下:
```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)';
}
});
```
以上两种方法都可以实现表格固定表头或锁定前几列的功能,具体使用哪种方法可以根据实际情况来选择。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)