Skep van 'n HTML-tabel uit 'n array van objekte

Gestel ons het 'n sekere array van objekte, bv. so 'n array met gebruikers:

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

Laat ons van hierdie array 'n HTML-tabel maak, waar ons in elke ry die data van 'n afsonderlike gebruiker sal plaas.

Met so 'n datastruktuur word daar gewoonlik een lus oor die array gedraai en word elke sel van die tabel met die hand geskep, soos 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);
}

Hierdie benadering bied groot buigsaamheid - ons kan self die volgorde van data in die tabelselle beheer (ons kan bv. die naam en van omruil).

Bo en behalwe kan ons, as ons wil, gebeure aan sekere selle heg. Byvoorbeeld, kan ons op die sel met die van 'n sekere handeling met 'n klik sit, ensovoorts.

Die volgende array met werknemers word gegee:

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

Vertoon die elemente van hierdie array in die vorm van 'n HTML tabel.

Wysig die vorige taak sodat met 'n klik op enige sel met ouderdom sy inhoud met 1 verhoog word.

Wysig die vorige taak sodat met 'n klik op enige sel met salaris sy inhoud met 10% verhoog word.