html中遍历list数组填写table中数据
时间: 2024-03-01 08:50:38 浏览: 16
可以使用JavaScript中的循环语句来遍历list数组,并使用DOM操作将数据填写到table中。
假设有一个id为"myTable"的table元素,其中包含了一个thead元素和一个tbody元素,且thead中包含了表头信息,那么可以按照以下步骤来填写数据:
1. 获取table元素和tbody元素
```
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
```
2. 遍历list数组,并创建行和单元格元素
```
for(var i=0; i<list.length; i++){
var row = document.createElement("tr"); // 创建行元素
var cell1 = document.createElement("td"); // 创建第一个单元格元素
var cell2 = document.createElement("td"); // 创建第二个单元格元素
// 将list中的数据填写到单元格元素中
cell1.innerHTML = list[i].name;
cell2.innerHTML = list[i].value;
// 将单元格元素添加到行元素中
row.appendChild(cell1);
row.appendChild(cell2);
// 将行元素添加到tbody元素中
tbody.appendChild(row);
}
```
3. 将tbody元素添加到table元素中
```
table.appendChild(tbody);
```
这样就可以将list数组中的数据填写到table中了。需要注意的是,如果表格中已经存在数据,那么在填写新数据之前需要先清空tbody元素中的内容。