Создавање HTML табела од низа објекти

Нека имаме дадена некоја низа објекти, на пример, вакава низа со корисници:

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

Ајде да направиме од оваа низа HTML табела, во секој ред од која ќе ги запишеме податоците за секој корисник.

Со таква структура на складирање на податоци обично се покренува еден циклус низ низата и се создава секоја ќелија на табелата рачно, вака:

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

Таквиот пристап дава голема флексибилност - ние можеме самите да го регулираме редоследот на распоредување на податоците по ќелиите на табелата (можеме, на пример, да ги замениме местата на името и презимето).

Освен тоа, по желба можеме да додаваме настани на одредени ќелии. На пример, може на ќелијата со презиме да додадеме некоја акција при клик и така натаму.

Дадена е следнава низа со вработени:

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

Прикажете ги елементите од оваа низа во вид на HTML табела.

Модифицирајте ја претходната задача така што при клик на која било ќелија со возраст нејзината содржина ќе се зголемува за 1.

Модифицирајте ја претходната задача така што при клик на која било ќелија со плата нејзината содржина ќе се зголемува за 10%.