点击某行后底色保留
时间: 2024-02-15 15:01:31 浏览: 23
如果你希望用户点击表格某行后,该行的底色保留,可以使用 JavaScript 来实现这个效果。
具体来说,当用户点击行时,你可以通过 JavaScript 获取到当前的表格行元素,然后修改其样式,例如将其背景色设置为指定的颜色。同时,你需要记录下当前被选中的行,以便在用户点击其他行时,将之前选中的行恢复到默认样式。
以下是一个示例代码:
```html
<table>
<tr onclick="selectRow(this);">
<td>cell content</td>
<td>cell content</td>
</tr>
<tr onclick="selectRow(this);">
<td>cell content</td>
<td>cell content</td>
</tr>
</table>
<script>
let selectedRow = null;
function selectRow(row) {
// 如果之前有选中的行,将其恢复到默认样式
if (selectedRow !== null) {
selectedRow.style.backgroundColor = "";
}
// 设置当前选中的行的样式
row.style.backgroundColor = "yellow";
selectedRow = row;
}
</script>
```
在这个例子中,我们在表格行的 `onclick` 事件中调用了 `selectRow` 函数。当用户点击行时,该函数会首先检查之前是否已经有选中的行,如果有,则将其恢复到默认样式;然后,将当前选中的行的样式设置为指定的颜色,并记录下当前选中的行。
需要注意的是,这种方式只是一种简单的实现方式,如果你希望在选中行时实现更复杂的效果,例如添加复选框或执行其他操作,你需要根据实际需求编写相应的代码。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)