JavaScript创建表格的方法
(编辑：jimmy 日期: 2024/11/16 浏览：2)
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。