列表的tr选中后保持选中状态代码
时间: 2024-03-14 11:47:57 浏览: 46
以下是使用JavaScript实现列表的tr选中后保持选中状态的代码示例:
HTML代码:
```html
<table>
<tr id="row1">
<td>Row 1</td>
</tr>
<tr id="row2">
<td>Row 2</td>
</tr>
<tr id="row3">
<td>Row 3</td>
</tr>
<tr id="row4">
<td>Row 4</td>
</tr>
</table>
```
CSS代码:
```css
.selected {
background-color: yellow;
}
```
JavaScript代码:
```javascript
// 获取所有的tr元素
var rows = document.getElementsByTagName("tr");
// 遍历所有的tr元素
for (var i = 0; i < rows.length; i++) {
// 为每个tr元素添加点击事件处理程序
rows[i].onclick = function() {
// 取消其他选中的tr元素
for (var j = 0; j < rows.length; j++) {
rows[j].classList.remove("selected");
}
// 将当前选中的tr元素添加selected类
this.classList.add("selected");
// 将当前选中的tr元素的ID存储在本地存储中
localStorage.setItem("selectedRow", this.id);
};
}
// 页面加载时,根据存储的ID来恢复选中状态
var selectedRow = localStorage.getItem("selectedRow");
if (selectedRow) {
document.getElementById(selectedRow).classList.add("selected");
}
```
这段代码会为所有的tr元素添加点击事件处理程序,在点击时将当前选中的tr元素添加selected类,同时将其ID存储在本地存储中。在页面加载时,根据存储的ID来恢复选中状态。如果用户离开页面后重新进入,仍会保持选中状态。