Kuunda Jedwali la HTML Kutoka kwa Safu kwa kutumia JavaScript

Tuchukulie tuna jedwali tupu fulani:

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

Tuchukulie pia tuna safu yenye tabaka mbili, kwa mfano, hii:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

Wacha tutengeneze jedwali la HTML kulingana na safu hii, lililojazwa na vipengele vya safu hii. Hii inamaanisha tutapata jedwali lenye safu tatu za mlalo (mstari), ambayo kila moja ina seli 4.

Tutatatua tatizo hili kwa kutumia vitanzi viwili vilivyowekwa ndani ya kingine for-of:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
	let tr = document.createElement('tr');
	
	for (let elem of subArr) {
		let td = document.createElement('td');
		td.textContent = elem;
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Kama unavyoona, suluhisho letu limekuwa la ulimwengu wote na halitegemei idadi ya safu ndogo (subarrays) wala idadi ya vipengele katika kila safu ndogo. Sheria pekee ni kwamba safu ndogo zote ziwe na idadi sawa ya vipengele.

Tuna safu hii:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];

Bila kuangalia sehemu ya kinachofundishwa katika somo, onyesha vipengele vya safu iliyotolewa kwa muundo wa jedwali la HTML table.

Badilisha tatizo la awali ili kwenye jedwali andikwe sio vipengele wenyewe, bali miraba ya vipengele hivi.