Ustvarjanje HTML tabele iz polja objektov

Recimo, da imamo dano neko polje objektov, na primer, takšno polje z uporabniki:

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

Naredimo iz tega polja HTML tabelo, v vsako vrstico katere zapišemo podatke posameznega uporabnika.

Pri takšni strukturi shranjevanja podatkov običajno zaženemo eno zanko po polju in ročno ustvarimo vsako celico tabele, takole:

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

Takšen pristop daje veliko prilagodljivosti - lahko sami uravnavamo vrstni red razporeditve podatkov po celicah tabele (lahko, na primer, zamenjamo mesti imenu in priimku).

Poleg tega lahko po želji dodajamo dogodke na določene celice. Na primer, na celico s priimkom lahko dodamo neko dejanje ob kliku in tako naprej.

Dan je naslednje polje z zaposlenimi:

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

Izpišite elemente tega polja v obliki HTML tabele.

Spremenite prejšnjo nalogo tako, da se ob kliku na katero koli celico s starostjo njena vsebina poveča za 1.

Spremenite prejšnjo nalogo tako, da se ob kliku na katero koli celico s plačo njena vsebina poveča za 10%.