Skapa HTML-tabell från en array av objekt

Låt oss säga att vi har en viss array av objekt, till exempel en sådan array med användare:

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

Låt oss skapa en HTML-tabell från denna array, där vi i varje rad skriver in data från en separat användare.

Med en sådan datastruktur startar man vanligtvis en loop genom arrayen och skapar varje tabellcell manuellt, så här:

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

Detta tillvägagångssätt ger stor flexibilitet - vi kan själva styra ordningen på data i tabellcellerna (vi kan till exempel byta plats på förnamn och efternamn).

Dessutom kan vi, om vi vill, koppla händelser till vissa celler. Till exempel, kan vi koppla någon åtgärd vid klick till cellen med efternamnet och så vidare.

Följande array med anställda är given:

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

Visa elementen i denna array i form av en HTML tabell.

Modifiera föregående uppgift så att innehållet i vilken ålderscell som helst ökar med 1 när man klickar på den.

Modifiera föregående uppgift så att innehållet i vilken löncell som helst ökar med 10% när man klickar på den.