点击某行后出现底色
时间: 2024-02-15 15:01:37 浏览: 23
如果你希望用户点击表格某行后,该行的底色发生变化,可以使用 JavaScript 来实现这个效果。你可以通过添加 CSS 类来改变行的样式。
以下是一个示例代码:
```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>
<style>
.selected {
background-color: yellow;
}
</style>
<script>
let selectedRow = null;
function selectRow(row) {
// 如果之前有选中的行,将其恢复到默认样式
if (selectedRow !== null) {
selectedRow.classList.remove("selected");
}
// 设置当前选中的行的样式
row.classList.add("selected");
selectedRow = row;
}
</script>
```
在这个例子中,我们在表格行的 `onclick` 事件中调用了 `selectRow` 函数。当用户点击行时,该函数会首先检查之前是否已经有选中的行,如果有,则将其恢复到默认样式;然后,将当前选中的行的样式添加一个 CSS 类,该类定义了选中行的样式。同时,我们定义了一个名为 `selected` 的 CSS 类,用于指定选中行的样式。
需要注意的是,如果你希望在选中行时实现更复杂的效果,例如添加复选框或执行其他操作,你需要根据实际需求编写相应的代码。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![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)