Создание 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.innerHTML = user.name;
	tr.appendChild(td1);
	
	let td2 = document.createElement('td');
	td2.innerHTML = user.surname;
	tr.appendChild(td2);
	
	let td3 = document.createElement('td');
	td3.innerHTML = 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%.