Креирање 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%.