Creazione di una tabella HTML da un array di oggetti

Supponiamo di avere un certo array di oggetti, ad esempio, questo array con utenti:

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

Creiamo da questo array una tabella HTML, in ogni riga della quale scriveremo i dati di un singolo utente.

Con questa struttura di archiviazione dei dati di solito si avvia un ciclo sull'array e si crea ogni cella della tabella manualmente, in questo modo:

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

Questo approccio offre una grande flessibilità - possiamo regolare manualmente l'ordine di disposizione dei dati nelle celle della tabella (possiamo, ad esempio, scambiare nome e cognome).

Inoltre, se lo desideriamo, possiamo assegnare eventi a celle specifiche. Ad esempio, possiamo assegnare un'azione al click sulla cella con il cognome e così via.

È dato il seguente array con dipendenti:

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

Visualizza gli elementi di questo array sotto forma di tabella HTML.

Modifica il problema precedente in modo che cliccando su qualsiasi cella con l'età il suo contenuto aumenti di 1.

Modifica il problema precedente in modo che cliccando su qualsiasi cella con lo stipendio il suo contenuto aumenti di 10%.