Criação de tabela HTML a partir de um array de objetos

Suponha que tenhamos um determinado array de objetos, por exemplo, este array com usuários:

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

Vamos criar uma tabela HTML a partir deste array, onde cada linha conterá os dados de um usuário individual.

Com essa estrutura de armazenamento de dados, geralmente executa-se um loop pelo array e cria-se cada célula da tabela manualmente, assim:

<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);
}

Essa abordagem oferece grande flexibilidade - podemos controlar a ordem dos dados nas células da tabela (podemos, por exemplo, trocar nome e sobrenome de lugar).

Além disso, se desejarmos, podemos adicionar eventos a células específicas. Por exemplo, podemos adicionar alguma ação ao clique em uma célula com o sobrenome e assim por diante.

Dado o seguinte array com funcionários:

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

Exiba os elementos deste array na forma de uma tabela HTML.

Modifique a tarefa anterior para que, ao clicar em qualquer célula com a idade, seu conteúdo aumente em 1.

Modifique a tarefa anterior para que, ao clicar em qualquer célula com o salário, seu conteúdo aumente em 10%.