JavaScript创建表格的方法

时间：2021-05-26

本文实例为大家分享了JavaScript创建表格的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id = "mountains"></div><script> let MOUNTAINS = [ {name: "Kilimanjaro", height: 5895, place: "Tanzania"}, {name: "Everest", height: 8848, place: "Nepal"}, {name: "Mount Fuji", height: 3776, place: "Japan"}, {name: "Vaalserberg", height: 323, place: "Netherlands"}, {name: "Denali", height: 6168, place: "United States"}, {name: "Popocatepetl", height: 5465, place: "Mexico"}, {name: "Mont Blanc", height: 4808, place: "Italy/France"} ]; // 创建表格 function buildTable(data) { let table = document.createElement("table"); let tr = document.createElement("tr"); // 通过 for in 循环遍历对象,得到对象的属性,为表头添加内容 for (let i in data[6]) { let th = document.createElement("th"); th.innerText = i; tr.appendChild(th); } table.appendChild(tr); // 通过 forEach 循环遍历对象数组,为表格添加行 data.forEach((value, index) => { let tr = document.createElement("tr"); // 通过 for in 循环遍历对象,得到对象的属性,给每行添加内容 for (let index1 in data[index]) { let td = document.createElement("td"); td.innerText = data[index][index1]; tr.appendChild(td); } table.appendChild(tr); }); //设置表格的对齐属性,和边框属性 table.setAttribute("text-align", "right"); table.setAttribute("border","1"); return table; } document.querySelector("div").appendChild(buildTable(MOUNTAINS));</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章