2024年08月03日 建站教程
如何原生js语法根据指定数据生成一个表格，下面web建站小编给大家简单介绍一下如何通过遍历该数组，动态地生成表格。
语法如下：
//数据
var students = [
{name: "小米", age: 33, city: "杭州市西湖区"},
{name: "小明", age: 23, city: "北京市人民路"},
{name: "小李", age: 55, city: "上海市南京路"}
];
//生成表格
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
var th = document.createElement("th");
th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
var tr = document.createElement("tr");
for (var key in students[i]) {
var td = document.createElement("td");
td.innerHTML = students[i][key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
输出结果：
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td>
<td>33</td>
<td>杭州市西湖区</td>
</tr>
<tr>
<td>小明</td>
<td>23</td>
<td>北京市人民路</td>
</tr>
<tr>
<td>小李</td>
<td>55</td>
<td>上海市南京路</td>
</tr>
</tbody>
</table>
本文链接：http://so.lmcjl.com/news/9882/