Javascript-форум - Построение таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Построение таблицы (https://javascript.ru/forum/dom-window/78689-postroenie-tablicy.html)

Построение таблицы

Дали задание на изменение кода построения таблицы, а именно повторяющиеся элементы кода заменить функцией. Вот сам код:

<!doctype html>

<meta charset="utf8">
<style>
    /* Defines a cleaner look for tables */
    table  { border-collapse: collapse; }
    td, th { border: 1px solid black; padding: 3px 8px; }
    th     { text-align: left; }
</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 buildTable(data) {
        //creating table
        let table = document.createElement('table');
        let fields = Object.keys(data[0]);
        //creating elements
        let headRow = document.createElement('tr');
        fields.forEach(function(field) {
            let headCell = document.createElement('th');
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.appendChild(headRow);
        data.forEach(function(object) {
            let row = document.createElement('tr');
            fields.forEach(function(field) {
                let cell = document.createElement('td');
                cell.textContent = object[field];
                //right align
                if (typeof object[field] == 'number') {
                    cell.style.textAlign = 'right';
                }
                row.appendChild(cell);
            });
            table.appendChild(row);
        });
        return table;
    }

    document.querySelector("#mountains").appendChild(buildTable(MOUNTAINS));
</script>

Написал для него следующую функцию, но ничего, кроме шапки таблицы вывести не получается:

function newRow(data, tableEl) {
        let tr = document.createElement('tr');
        for (let i = 0; i < data.length; i++) {
            let el = document.createElement(tableEl);
            el.innerText = data[i];
            tr.appendChild(el);
        }
        return tr;
    }

создание таблицы

Potatka,
как вариант ...

<!doctype html>

<meta charset="utf8">
<style>
    /* Defines a cleaner look for tables */
    table  { border-collapse: collapse; }
    td, th { border: 1px solid black; padding: 3px 8px; }
    th     { text-align: left; }
    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"}
    ];

    const createTr = (arr, tag = 'td') => `<tr><${tag}>` + arr.join(`<${tag}>`);

    function buildTable(data) {
        let table = document.createElement('table');
        let fields = Object.keys(data[0]);
        let trs = data.map(obj => createTr(Object.values(obj))).join('');
        let html = '<thead>' + createTr(fields, 'th') + '<tbody>' + trs;
        table.innerHTML = html;
        return table;
    }

    document.querySelector("#mountains").appendChild(buildTable(MOUNTAINS));
</script>

рони, интересный способ! А запятые, которые вы добавили в названиях мест, обязательны?

Цитата:

Сообщение от рони

teg

Годовалая самка овцы? Может стоит называть более приближённо, например, 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>

Цитата:

Сообщение от Malleys

Годовалая самка овцы?

я не знаю английский, поэтому мне ваш юмор недоступен.

Цитата:

Сообщение от Malleys

А запятые, которые вы добавили в названиях мест, обязательны?

это про что?

Цитата:

Сообщение от рони

я не знаю английский

Однако вы знаете редкий термин из овцеводства. Glossary of sheep husbandry

Я так понимаю, в вашем языке нет звука [æ], поэтому вы его заменяете на звук [ɛ], и соответственно потом путаете tag и teg, man и men, and и end, had и head, land и lend, spanned и spend, track и trek?

Цитата:

Сообщение от рони

это про что?

На снимке видны запятые в конце каждого слова, обозначающего месторасположение горы. У вас не видно? (Должно быть видно!)

рони,
вы наверно хотели tag, а не teg, и забыли про join в строке создания trs.
спасибо рони, сейчас исправлю пост #2
рони, а вы про овец прочли?
знаешь рони есть долгая дорога ~~...~~ в дюны.

Цитата:

Сообщение от Malleys

Я так понимаю, в вашем языке нет звука [æ], поэтому вы его заменяете на звук [ɛ], и соответственно потом путаете tag и teg, man и men, and и end, had и head, land и lend, spanned и spend, track и trek?

я не понимаю знаков/звуков/правил транскрипции, пытался, не дано.