在点击某行后将效果停留
时间: 2023-12-25 13:02:55 浏览: 34
如果你想在点击某行后使其保持选中状态,可以在点击事件中添加代码来改变该行的样式,比如添加一个CSS类来改变背景颜色等。同时,你还需要在页面加载时判断哪些行应该保持选中状态,并将它们的样式改变为选中状态。
以下是一个示例代码,其中假设页面加载时需要保持选中状态的行的ID分别为1、3、5:
HTML代码:
```
<table>
<tr id="1" onclick="selectRow(this);">
<td>行1</td>
<td>内容1</td>
</tr>
<tr id="2" onclick="selectRow(this);">
<td>行2</td>
<td>内容2</td>
</tr>
<tr id="3" onclick="selectRow(this);">
<td>行3</td>
<td>内容3</td>
</tr>
<tr id="4" onclick="selectRow(this);">
<td>行4</td>
<td>内容4</td>
</tr>
<tr id="5" onclick="selectRow(this);">
<td>行5</td>
<td>内容5</td>
</tr>
</table>
```
CSS代码:
```
.selected {
background-color: yellow;
}
```
JavaScript代码:
```
// 页面加载时将需要保持选中状态的行的样式改变为选中状态
window.onload = function() {
var selectedIds = [1, 3, 5]; // 需要保持选中状态的行的ID
for (var i = 0; i < selectedIds.length; i++) {
var row = document.getElementById(selectedIds[i]);
row.classList.add("selected");
}
}
// 点击行时将该行的样式改变为选中状态
function selectRow(row) {
row.classList.toggle("selected");
}
```
在上面的代码中,页面加载时会将ID为1、3、5的行的样式改变为选中状态。当用户点击某行时,该行的样式会改变为选中状态(即添加/移除CSS类),从而使其保持选中状态。你可以根据实际需求修改相应的代码来实现你的需求。