Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2019, 23:01
Новичок на форуме
Отправить личное сообщение для Potatka Посмотреть профиль Найти все сообщения от Potatka
 
Регистрация: 20.10.2019
Сообщений: 1

Построение таблицы
Дали задание на изменение кода построения таблицы, а именно повторяющиеся элементы кода заменить функцией. Вот сам код:
<!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;
    }
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2019, 23:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

создание таблицы
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>

Последний раз редактировалось рони, 21.10.2019 в 17:37.
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2019, 13:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,263

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

Сообщение от рони
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, 21.10.2019 в 13:45.
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2019, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

Сообщение от Malleys
Годовалая самка овцы?
я не знаю английский, поэтому мне ваш юмор недоступен.
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2019, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

Сообщение от Malleys
А запятые, которые вы добавили в названиях мест, обязательны?
это про что?
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2019, 17:09
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,263

Сообщение от рони
я не знаю английский
Однако вы знаете редкий термин из овцеводства. Glossary of sheep husbandry

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

Сообщение от рони
это про что?

На снимке видны запятые в конце каждого слова, обозначающего месторасположение горы. У вас не видно? (Должно быть видно!)
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2019, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

рони,
вы наверно хотели tag, а не teg, и забыли про join в строке создания trs.
спасибо рони, сейчас исправлю пост #2
рони, а вы про овец прочли?
знаешь рони есть долгая дорога ... в дюны.
Ответить с цитированием
  #8 (permalink)  
Старый 21.10.2019, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

Сообщение от Malleys
Я так понимаю, в вашем языке нет звука [æ], поэтому вы его заменяете на звук [ɛ], и соответственно потом путаете tag и teg, man и men, and и end, had и head, land и lend, spanned и spend, track и trek?
я не понимаю знаков/звуков/правил транскрипции, пытался, не дано.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Построение таблицы Сергей74rus Элементы интерфейса 5 11.03.2018 17:04
Вывод из таблицы в БД c помощью AJAX smart-create AJAX и COMET 4 29.12.2016 20:44
почему не обрабатываются события в динамически добавленых строках таблицы boris2000 Events/DOM/Window 2 10.11.2016 14:04
Генерация таблицы из JSON Lemme Общие вопросы Javascript 34 23.07.2015 22:55
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51