Obyekt massivindən HTML cədvəlinin yaradılması

Tutaq ki, bizə müəyyən bir obyekt massivi verilib, məsələn, istifadəçilərlə belə bir massiv:

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

Gəlin bu massivdən HTML cədvəli düzəldək, hər sətirə ayrı-ayrı istifadəçinin məlumatlarını yazaq.

Belə bir məlumat strukturu ilə adətən massiv üzrə bir dövr işə salınır və cədvəlin hər xanası əl ilə belə yaradılır:

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

Bu yanaşma böyük çeviklik verir - biz məlumatların cədvəl xanaları üzrə yerləşdirmə qaydasını özümüz tənzimləyə bilərik (məsələn, ad və soyadı yerini dəyişə bilərik).

Bundan əlavə, istəsək, müəyyən xanalara hadisələr əlavə edə bilərik. Məsələn, soyad olan xanaya klikləməklə bəzi əməliyyatlar əlavə etmək olar və s.

Aşağıdakı işçilər massivi verilib:

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

Bu massivin elementlərini HTML cədvəli şəklində çıxarın.

Əvvəlki məsələni elə dəyişin ki, yaş olan hər hansı bir xanaya kliklədikdə onun məzmunu 1 vahid artsın.

Əvvəlki məsələni elə dəyişin ki, maaş olan hər hansı bir xanaya kliklədikdə onun məzmunu 10% artsın.