Kreiranje HTML tabele iz niza objekata

Pretpostavimo da imamo određeni niz objekata, na primer, ovaj niz sa korisnicima:

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

Hajde da od ovog niza napravimo HTML tabelu, u svaki red koje ćemo upisati podatke jednog korisnika.

Sa ovakvom strukturom skladištenja podataka obično se pokreće jedna petlja kroz niz i svako polje tabele se ručno kreira, ovako:

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

Ovaj pristup daje veliku fleksibilnost - možemo sami da regulišemo redosled podataka u poljima tabele (možemo, na primer, da zamenimo mesta imenu i prezimenu).

Pored toga, po želji možemo da dodajemo dogadaje na određena polja. Na primer, moguće je na polje sa prezimenom dodati neku akciju na klik i tako dalje.

Dat je sledeći niz sa zaposlenima:

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

Prikažite elemente ovog niza u vidu HTML tabele.

Modifikujte prethodni zadatak tako da se klikom na bilo koje polje sa godinama njegov sadržaj uveća za 1.

Modifikujte prethodni zadatak tako da se klikom na bilo koje polje sa platom njegov sadržaj uveća za 10%.