Het maken van een HTML-tabel uit een array van objecten

Stel dat we een bepaalde array van objecten hebben, bijvoorbeeld zo'n array met gebruikers:

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

Laten we van deze array een HTML-tabel maken, waarin we in elke rij de gegevens van een individuele gebruiker opslaan.

Met zo'n gegevensstructuur wordt meestal één lus over de array uitgevoerd en wordt elke tabelcel handmatig aangemaakt, zoals hier:

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

Deze aanpak biedt veel flexibiliteit - we kunnen zelf de volgorde van de gegevens in de tabelcellen regelen (we kunnen bijvoorbeeld de voornaam en achternaam omwisselen).

Bovendien kunnen we, als we dat willen, gebeurtenissen aan bepaalde cellen koppelen. We kunnen bijvoorbeeld op de cel met de achternaam een actie bij klik instellen, enzovoort.

Gegeven de volgende array met werknemers:

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

Geef de elementen van deze array weer in de vorm van een HTML tabel.

Pas de vorige opdracht zo aan dat bij een klik op een cel met leeftijd de inhoud ervan met 1 toeneemt.

Pas de vorige opdracht zo aan dat bij een klik op een cel met salaris de inhoud ervan met 10% toeneemt.