Книга: Выразительный JavaScript
Упражнения
Строим таблицу
Мы строили таблицы из простого текста в главе 6. HTML упрощает построение таблиц. Таблица в HTML строится при помощи следующих тегов:
<table>
<tr>
<th>name</th>
<th>height</th>
<th>country</th>
</tr>
<tr>
<td>Kilimanjaro</td>
<td>5895</td>
<td>Tanzania</td>
</tr>
</table>
Для каждой строки в теге <table>
содержится тег <tr>
. Внутри него мы можем размещать ячейки: либо ячейки заголовков <th>
, либо обычные ячейки <td>
.
Те же данные, что мы использовали в главе 6, снова доступны в переменной MOUNTAINS
.
Напишите функцию buildTable
, которая, принимая массив объектов с одинаковыми свойствами, строит структуру DOM, представляющую таблицу. У таблицы должна быть строка с заголовками, где имена свойств обёрнуты в элементы <th>
, и должно быть по одной строчке на объект из массива, где его свойства обёрнуты в элементы <td>
. Здесь пригодится функция Object.keys
, возвращающая массив, содержащий имена свойств объекта.
Когда вы разберётесь с основами, выровняйте ячейки с числами по правому краю, изменив их свойство style.textAlign
на "right"
.
<style>
/* Определяет стили для красивых таблиц */
table { border-collapse: collapse; }
td, th { border: 1px solid black; padding: 3px 8px; }
th { text-align: left; }
</style>
<script>
function buildTable(data) {
// Ваш код
}
document.body.appendChild(buildTable(MOUNTAINS));
</script>