HTML lentelės kūrimas iš objektų masyvo

Tarkime, kad turime tam tikrą objektų masyvą, pavyzdžiui, šį naudotojų masyvą:

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

Sukurkime iš šio masyvo HTML lentelę, kurioje kiekvienoje eilutėje įrašysime atskiro naudotojo duomenis.

Esant tokiai duomenų saugojimo struktūrai, paprastai paleidžiamas vienas ciklas per masyvą ir kiekvienas lentelės langelis sukuriamas rankiniu būdu, taip:

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

Šis metodas suteikia didelį lankstumą - mes galime patys reguliuoti duomenų išdėstymo lentelės langeliuose tvarką (galime, pavyzdžiui, sukeisti vardą ir pavardę vietomis).

Be to, norėdami galime priskirti įvykius tam tikriems langeliams. Pavyzdžiui, galima pavardės langeliui priskirti kokį nors veiksmą paspaudus ir pan.

Duotas toks darbuotojų masyvas:

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

Atvaizduokite šio masyvo elementus kaip HTML lentelę.

Modifikuokite ankstesnį uždavinį taip, kad paspaudus bet kurį amžiaus langelį, jo turinys padidėtų 1.

Modifikuokite ankstesnį uždavinį taip, kad paspaudus bet kurį atlyginimo langelį, jo turinys padidėtų 10%.