element table多选表格_如何用原生JS生成表格？

好久没有更新了，今天回归基础，总结一下如何用原生JavaScript生成表格。

概要：

• 用 JavaScript 生成一个表格

• 用本机 DOM API 来操作表

要求：

• 对 HTML 和 JavaScript 有基本的了解

(1)首先：你需要一个数组，数组内存放好相应的对象。

let classmate = [  { name: "MoMosa", height: 158, age: "12" },  { name: "Kia", height: 164, age: "12" }];

(2)目的：生成如下表。

      // 表头 name height age // 表体        // 表格行        MoMosa   // 单元格        158        12 Kia        164 12

(3)Let's start：

【index.html】代码如下

    Generate a table  

    

【getTable.js】代码如下

// 根据数组，实现用 JavaScript 生成一个表格let classmate = [  { name: "MoMosa", height: 158, age: "12" },  { name: "Kia", height: 164, age: "12" },  { name: "Poly", height: 150, age: "13" },  { name: "Leo", height: 159, age: "15" },  { name: "Ami", height: 160, age: "14" }];// 生成表头function generateTableHead (table) {  // createTHead()：返回与给定表关联的表头元素  // 如果表中不存在头的话，createTHead 会帮我们创建一个  let thead = table.createTHead();  let row = thead.insertRow(); // 在 thead 中添加一行  for (let key of data) {    let th = document.createElement('th')// 手动创建th表头    let text = document.createTextNode(key)    th.appendChild(text)    row.appendChild(th)  }}function generateTable (table, data) {  for (let element of data) {    let row = table.insertRow()    for (key in element) { // 内循环          let cell = row.insertCell()      // 创建一个新单元格      let text = document.createTextNode(element[key])      // 创建一个新的文本节点      cell.appendChild(text)      // 将文本节点附加到单元格    }  }}let table = document.querySelector("table");let data = Object.keys(classmate[0])// 调用generateTable(table, classmate)generateTableHead(table, data);// 注意⚠️：先创建表格 再创建表头

结果：

恭喜！你已经能够在不依赖任何外部库的情况下操作HTML表。

感谢你的阅读！

参考资讯：https://www.valentinog.com/blog/html-table/