Création d'un tableau HTML à partir d'un tableau d'objets

Supposons que nous ayons un certain tableau d'objets, par exemple, ce tableau d'utilisateurs :

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

Créons un tableau HTML à partir de ce tableau, dans chaque ligne duquel nous enregistrerons les données d'un utilisateur individuel.

Avec une telle structure de stockage de données, on lance généralement une boucle sur le tableau et on crée chaque cellule du tableau manuellement, comme ceci :

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

Cette approche offre une grande flexibilité - nous pouvons réguler nous-mêmes l'ordre de disposition des données dans les cellules du tableau (nous pouvons, par exemple, échanger le prénom et le nom de famille).

De plus, si nous le souhaitons, nous pouvons attacher des événements à certaines cellules. Par exemple, nous pouvons attacher une action au clic sur la cellule avec le nom de famille, et ainsi de suite.

Voici le tableau suivant avec des employés :

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

Affichez les éléments de ce tableau sous la forme d'une tableau HTML.

Modifiez la tâche précédente pour que un clic sur n'importe quelle cellule contenant l'âge augmente son contenu de 1.

Modifiez la tâche précédente pour que un clic sur n'importe quelle cellule contenant le salaire augmente son contenu de 10%.