Crearea unui tabel HTML dintr-un array de obiecte

Să presupunem că avem un array de obiecte, de exemplu, acest array cu utilizatori:

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

Să creăm un tabel HTML din acest array, în care să scriem datele fiecărui utilizator pe un rând separat.

Cu o astfel de structură de date, de obicei se rulează o buclă prin array și se creează fiecare celulă a tabelului manual, astfel:

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

Această abordare oferă o mare flexibilitate - putem reglementa noi înșine ordinea în care datele sunt plasate în celulele tabelului (putem, de exemplu, să schimbăm locul numelui și al prenumelui).

În plus, dacă dorim, putem atașa evenimente pe anumite celule. De exemplu, putem atașa o acțiune la click pe celula cu prenumele și așa mai departe.

Se dă următorul array cu angajați:

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

Afișați elementele acestui array sub forma unui tabel HTML.

Modificați problema anterioară astfel încât la click pe orice celulă cu vârsta, conținutul acesteia să crească cu 1.

Modificați problema anterioară astfel încât la click pe orice celulă cu salariul, conținutul acesteia să crească cu 10%.