HTML tabeli loomine objektide massiivist

Oletame, et meil on antud mingi objektide massiiv, näiteks selline kasutajate massiiv:

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

Teeme sellest massiivist HTML tabeli, milles iga ritta kirjutame ühe kasutaja andmed.

Sellise andmestruktuuri korral käivitatakse tavaliselt üks tsükkel massiivi üle ja luuakse iga tabeli lahtri käsitsi, näiteks nii:

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

See lähenemine annab suurt paindlikkust - me saame ise reguleerida andmete paigutust tabeli lahtritesse (saame näiteks vahetada nime ja perekonnanime asukohti).

Peale selle, soovi korral saame lisada sündmused kindlatele lahtritele. Näiteks, saame perekonnanimega lahtrile lisada mingi tegevuse klikile ja nii edasi.

Antud on järgmine töötajate massiiv:

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

Kuva selle massiivi elemendid HTML tabeli kujul.

Muida eelmist ülesannet nii, et klikkides mis tahes vanusega lahtrile suureneks selle sisu 1 võrra.

Muida eelmist ülesannet nii, et klikkides mis tahes palgaga lahtrile suureneks selle sisu 10% võrra.