Krijimi i një tabele HTML nga një grup objektesh

Le të themi se kemi një grup të caktuar objektesh, për shembull, ky grup me përdorues:

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

Le të krijojmë nga kjo një tabelë HTML, ku në çdo rresht do të shënojmë të dhënat e një përdoruesi të veçantë.

Me një strukturë të tillë të ruajtjes së të dhënave zakonisht niset një cikël përmes grupit dhe krijohet çdo qelizë e tabelës manualisht, kështu:

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

Kjo qasje ofron shumë fleksibilitet - ne mund të rregullojmë vetë renditjen e të dhënave nëpër qelizat e tabelës (mund, për shembull, të ndërrojmë vendet e emrit dhe mbiemrit).

Përveç kësaj, nëse dëshirojmë, mund t'i caktojmë ngjarje qelizave të caktuara. Për shembull, në qelizën me mbiemrin mund t'i caktojmë një veprim të caktuar me klikim e kështu me radhë.

Jepet grupi i mëposhtëm me punonjës:

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

Shfaqni elementët e këtij grupi në formën e një tabele HTML.

Modifikoni detyrën e mëparshme në mënyrë që gjithmonë kur klikohet në cilëndo qelizë me moshën përmbajtja e saj të rritet me 1.

Modifikoni detyrën e mëparshme në mënyrë që gjithmonë kur klikohet në cilëndo qelizë me pagën përmbajtja e saj të rritet me 10%.