HTML tabulas izveide no objektu masīva

Pieņemsim, ka mums ir dots noteikts objektu masīvs, piemēram, šāds lietotāju masīvs:

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

Izveidosim no šī masīva HTML tabulu, kuras katrā rindā ierakstīsim atsevišķa lietotāja datus.

Ar šādu datu glabāšanas struktūru parasti palaiž vienu ciklu pa masīvu un katru tabulas šūnu izveido manuāli, šādi:

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

Šāda pieeja nodrošina lielu elastību - mēs varam paši regulēt datu izvietojuma secību tabulas šūnās (varam, piemēram, samainīt vietām vārdu un uzvārdu).

Turklāt, ja vēlas, mēs varam pievienot notikumus noteiktām šūnām. Piemēram, uz uzvārda šūnu var pievienot kādu darbību pēc klikšķa un tā tālāk.

Dots šāds darbinieku masīvs:

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

Izvadiet šī masīva elementus HTML tabulas veidā.

Modificējiet iepriekšējo uzdevumu tā, lai pēc klikšķa uz jebkuras šūnas ar vecumu tās saturs palielinātos par 1.

Modificējiet iepriekšējo uzdevumu tā, lai pēc klikšķa uz jebkuras šūnas ar algu tās saturs palielinātos par 10%.