用DOM动态生成表格
时间: 2023-11-13 11:05:04 浏览: 44
好的,我可以帮你解答这个问题。
要用DOM动态生成表格,需要先创建一个table元素,然后在该元素下创建tr(行)和td(列)元素。
以下是一个示例代码:
```javascript
// 获取table元素
var table = document.getElementById("myTable");
// 创建表头
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
th1.innerHTML = "姓名";
th2.innerHTML = "年龄";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);
table.appendChild(thead);
// 创建表格内容
var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = data[i].name;
td2.innerHTML = data[i].age;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}
table.appendChild(tbody);
```
在这个示例中,先获取了一个id为"myTable"的table元素,并创建了表头和表格内容。其中,表格内容是根据一个数组data动态生成的,data中包含了每个人的姓名和年龄。
注意,这只是一个简单的示例代码,实际情况可能需要更多的判断和处理。
相关推荐
![](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)