Oprettelse af HTML-tabel fra en array af objekter

Lad os sige, at vi har en given array af objekter, for eksempel en sådan array med brugere:

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

Lad os lave en HTML-tabel fra denne array, hvor vi i hver række indsætter dataene for en enkelt bruger.

Med en sådan datastruktur starter man normalt en enkelt løkke gennem arrayet og opretter hver celle i tabellen manuelt, sådan her:

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

Denne tilgang giver stor fleksibilitet - vi kan selv regulere rækkefølgen af dataplacering i tabelcellerne (vi kan for eksempel bytte om på fornavn og efternavn).

Derudover kan vi, hvis vi ønsker, tilknytte events til bestemte celler. For eksempel kan man tilknytte en handling til efternavnets celle ved klik og så videre.

Følgende array med medarbejdere er givet:

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

Udskriv elementerne i denne array som en HTML tabel.

Modificer den foregående opgave, sådan at ved klik på enhver celle med alder, vil dens indhold blive forøget med 1.

Modificer den foregående opgave, sådan at ved klik på enhver celle med løn, vil dens indhold blive forøget med 10%.