Opprettelse av HTML-tabell fra en array med objekter

La oss si at vi har en array med objekter, for eksempel en slik array med brukere:

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

La oss lage en HTML-tabell fra denne arrayen, der vi skriver dataene for hver enkelt bruker i hver rad.

Med en slik datastruktur starter man vanligvis en løkke gjennom arrayen og oppretter hver tabellcelle manuelt, slik:

<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 tilnærmingen gir stor fleksibilitet - vi kan selv regulere rekkefølgen av dataene i tabellcellene (vi kan for eksempel bytte plass på fornavn og etternavn).

I tillegg kan vi, hvis vi ønsker, legge til hendelser på bestemte celler. For eksempel kan vi legge til en handling på etternavn-cellen ved klikk og så videre.

Gitt følgende array med ansatte:

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

Vis elementene fra denne arrayen som en HTML- tabell.

Modifiser den forrige oppgaven slik at ved klikk på en hvilken som helst celle med alder økes innholdet med 1.

Modifiser den forrige oppgaven slik at ved klikk på en hvilken som helst celle med lønn økes innholdet med 10%.