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

原生js如何判断图片是否存在

原生JS如果只关闭手机浏览器中弹出提示框

原生js使用es6引入import报错解决方法

原生js获取各种屏幕的宽度和高度

原生js实现ajax方法（附代码）

标签： js制表, js生成表格, 原生js

上面是“原生JS如何生成一个表格（根据数据生成表格）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4469.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！