原生JS如何生成一个表格（根据数据生成表格）

如何原生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>