表格点击高亮显示
时间: 2024-02-28 08:56:04 浏览: 41
要实现表格点击高亮显示,可以使用JavaScript来实现。具体的实现步骤如下:
1. 给表格中每一个单元格添加一个点击事件监听器。
2. 在点击事件监听器中,获取当前点击的单元格,并将其样式设置为高亮显示。
3. 在点击其他单元格时,将之前高亮的单元格样式恢复为原来的样式,然后将当前点击的单元格样式设置为高亮显示。
以下是一个简单的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格点击高亮显示</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.highlight {
background-color: yellow;
}
</style>
<script>
window.onload = function() {
var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].onclick = function() {
// 取消之前高亮的单元格
var prevHighlighted = document.getElementsByClassName("highlight");
if (prevHighlighted.length > 0) {
prevHighlighted[0].classList.remove("highlight");
}
// 高亮当前点击的单元格
this.classList.add("highlight");
};
}
};
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
```
在这个示例中,当单击表格中的一个单元格时,该单元格的背景色将变为黄色,表示它已经被高亮显示。如果单击其他单元格,则之前高亮的单元格将恢复原来的样式,新点击的单元格将被高亮显示。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)