向多表头表格添加数据的网页
时间: 2023-11-11 08:40:31 浏览: 45
要向多表头表格添加数据,你可以使用JavaScript来动态生成表格,并将数据插入到相应的单元格中。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
th.rotate {
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th rowspan="2">Header 1</th>
<th colspan="3">Header 2</th>
<th colspan="3">Header 3</th>
</tr>
<tr>
<th>Subheader 1</th>
<th>Subheader 2</th>
<th>Subheader 3</th>
<th>Subheader 1</th>
<th>Subheader 2</th>
<th>Subheader 3</th>
</tr>
</table>
<script>
// 示例数据
var data = [
["Data 1", "Data 2", "Data 3", "Data 1", "Data 2", "Data 3", "Data 1", "Data 2", "Data 3"],
["Data A", "Data B", "Data C", "Data A", "Data B", "Data C", "Data A", "Data B", "Data C"],
["Data X", "Data Y", "Data Z", "Data X", "Data Y", "Data Z", "Data X", "Data Y", "Data Z"]
];
// 获取表格
var table = document.getElementById("myTable");
// 循环遍历数据并插入到表格中
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(-1); // 在表格末尾插入行
for (var j = 0; j < data[i].length; j++) {
var cell = row.insertCell(j); // 在当前行插入单元格
cell.innerHTML = data[i][j]; // 设置单元格的内容
}
}
</script>
</body>
</html>
```
上述代码会生成一个带有多表头的表格,并将示例数据插入到表格中。你可以根据需要修改数据以及表头的数量和内容。JavaScript部分会动态生成表格,并将数据插入到相应的单元格中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)