JavaScript建立表格的方法
阿新 • • 發佈：2020-04-14
本文例項為大家分享了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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。