使用最少的代码实现。这个表格允许用户点击行以高亮显示选中的行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可交互表格</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
tr:hover {
background-color: #f0f0f0;
cursor: pointer;
}
.selected {
background-color: #d0e0f0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr onclick="toggleSelect(this)">
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr onclick="toggleSelect(this)">
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr onclick="toggleSelect(this)">
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</tbody>
</table>
<script>
function toggleSelect(row) {
row.classList.toggle('selected');
}
</script>
</body>
</html>
说明：
- 表格结构：使用
<table>、<thead>和<tbody>标签定义表格。 - 样式：通过CSS设置表格的基本样式和行悬停效果。
- 交互功能：使用JavaScript的
toggleSelect函数来切换选中行的样式。点击行时，会高亮显示或取消高亮。
