Օբյեկտների զանգվածից 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%-ով։