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%-ით.