Kuunda Jedwali la HTML Kutoka kwa Safu ya Vitu

Acha tuwe na safu fulani ya vitu, kwa mfano, safu hii ya watumiaji:

let watumiaji = [
	{
		jina: 'jina1',
		uanamama: 'uanamama1',
		patronimiki: 'patronimiki1'
	},
	{
		jina: 'jina2',
		uanamama: 'uanamama2',
		patronimiki: 'patronimiki2'
	},
	{
		jina: 'jina3',
		uanamama: 'uanamama3',
		patronimiki: 'patronimiki3'
	},
];

Wacha tufanye jedwali la HTML kutoka kwa safu hii, katika kila safu tutaandika data ya mtumiaji mmoja mmoja.

Kwa muundo kama huu wa kuhifadhi data kawaida huwasha kitanzi kimoja kwenye safu na kuunda kiini kila kimoja cha jedwali kwa mikono, kama hivi:

<table id="jedwali"></table>

let jedwali = document.getElementById('jedwali');

for (let mtumiaji of watumiaji) {
	let tr = document.createElement('tr');
	
	let td1 = document.createElement('td');
	td1.textContent = mtumiaji.jina;
	tr.appendChild(td1);
	
	let td2 = document.createElement('td');
	td2.textContent = mtumiaji.uanamama;
	tr.appendChild(td2);
	
	let td3 = document.createElement('td');
	td3.textContent = mtumiaji.patronimiki;
	tr.appendChild(td3);
	
	jedwali.appendChild(tr);
}

Mbinu hii inatoa umbikivu mkubwa - tunaweza tuweza kudhibiti mpangilio wa data kwenye viini vya jedwali (tunaweza, kwa mfano, kubadilishana maeneo jina na uanamama).

Zaidi ya hayo, tukitaka tunaweza kuweka matukio kwenye viini fulani. Kwa mfano, inavezekana kuweka kitendo fulani kwenye kiini cha uanamama kwa kubonyeza na kadhalika.

Imetolewa safu ifuatayo ya wafanyikazi:

let wafanyikazi = [
	{jina: 'mfanyikazi1', umri: 30, mshahara: 400},
	{jina: 'mfanyikazi2', umri: 31, mshahara: 500},
	{jina: 'mfanyikazi3', umri: 32, mshahara: 600},
];

Onyesha vipengele vya safu hii kwa umbile la jedwali la HTML.

Rekebisha shida iliyotangulia ili kwa kubonyeza kwenye kiini chochote chenye umri yaliyomo yake yaongezeke kwa 1.

Rekebisha shida iliyotangulia ili kwa kubonyeza kwenye kiini chochote chenye mshahara yaliyomo yake yaongezeke kwa 10%.