# Создание HTML таблицы из массива объектов

Пусть у нас дан некторый массив объектов, например, вот такой массив с юзерами:

`let users = [ { name: 'name1', surname: 'surname1', patronymic: 'patronymic1' }, { name: 'name2', surname: 'surname2', patronymic: 'patronymic2' }, { name: 'name3', surname: 'surname3', patronymic: 'patronymic3' }, ];`

Давайте сделаем из этого массива HTML таблицу, в каждый ряд который запишем данные отдельного юзера.

При такой структуре хранения данных обычно запускают один цикл по массиву и создают каждую ячейку таблицы в ручную, вот так:

`<table id="table"></table>` `let table = document.getElementById('table'); for (let user of users) { let tr = document.createElement('tr'); let td1 = document.createElement('td'); td1.textContent = user.name; tr.appendChild(td1); let td2 = document.createElement('td'); td2.textContent = user.surname; tr.appendChild(td2); let td3 = document.createElement('td'); td3.textContent = user.patronymic; tr.appendChild(td3); table.appendChild(tr); }`

Такой подход дает большую гибкость - мы можем сами регулировать порядок расположения данных по ячейкам таблицы (можем, к примеру, поменять местами имя и фамилию).

Кроме того, при желании мы можем навешивать события на определенные ячейки. К примеру, можно на ячейку с фамилией навесить какое-то действие по клику и так далее.

Дан следующий массив с работниками:

`` `let employees = [ {name: 'employee1', age: 30, salary: 400}, {name: 'employee2', age: 31, salary: 500}, {name: 'employee3', age: 32, salary: 600}, ];`

Выведите элементы этого массива в виде HTML таблицы.

Модифицируйте предыдущую задачу так, чтобы по клику на любую ячейку с возрастом ее содержимое увеличивалось на `1`.

Модифицируйте предыдущую задачу так, чтобы по клику на любую ячейку с зарплатой ее содержимое увеличивалось на `10%`.

← →
↑
en ru