Объектлар массивдан 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% га оширилсин.