请问eltable,我想点击不同的表头可以让表头改变颜色,并且可以获取这列数据,
时间: 2023-08-03 22:06:06 浏览: 98
你可以通过为表头添加事件处理程序来实现点击时改变颜色和获取列数据的功能。以下是一个示例代码,可以供你参考:
```html
<table id="myTable">
<thead>
<tr>
<th onclick="changeColor(0)">Name</th>
<th onclick="changeColor(1)">Age</th>
<th onclick="changeColor(2)">Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script>
function changeColor(colIndex) {
// 获取表格元素
var table = document.getElementById("myTable");
// 获取表头元素
var th = table.getElementsByTagName("th")[colIndex];
// 改变表头颜色
th.style.backgroundColor = "yellow";
// 获取列数据
var cells = table.getElementsByTagName("td");
for (var i = colIndex; i < cells.length; i += 3) {
cells[i].style.backgroundColor = "yellow";
}
}
</script>
```
在上面的示例代码中,`changeColor`函数会接收一个参数`colIndex`,表示点击的是哪一列。然后,通过`getElementById`方法获取表格元素,并且通过`getElementsByTagName`方法获取表头元素和列数据元素。在处理表头元素时,我们只需要改变其背景颜色即可;在处理列数据元素时,我们需要循环遍历所有的列数据,并且每隔3个数据改变一次颜色,因为我们的表格中每行有3个单元格。
你可以根据自己的需求适当修改上面的示例代码,实现你想要的功能。
阅读全文