рони, интересный способ! А запятые, которые вы добавили в названиях мест, обязательны?
Годовалая самка овцы? Может стоит называть более приближённо, например, nodeName.
|
Сообщение от Potatka
|
|
повторяющиеся элементы кода заменить функцией
|
Можно так...
<!doctype html>
<meta charset="utf8">
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px 8px; }
thead td { font-weight: bolder; }
tbody td:nth-child(2) { text-align: right; }
</style>
<h1>Mountains</h1>
<div id="mountains"></div>
<script>
const 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 addRow(table, fields, fieldMap = x => x) {
const row = table.insertRow();
for(const field of fields) {
const cell = row.insertCell();
cell.textContent = fieldMap(field);
}
}
function buildTable(mountains) {
const table = document.createElement("table");
const fields = Object.keys(mountains[0]);
addRow(table.createTHead(), fields);
const section = table.createTBody();
for(const mountain of mountains)
addRow(section, fields, field => mountain[field]);
return table;
}
document.querySelector("#mountains").appendChild(buildTable(MOUNTAINS));
</script>