好久没有更新了,今天回归基础,总结一下如何用原生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/