Die Skepping van 'n HTML Tabel uit 'n Array in JavaScript

Kom ons neem aan ons het 'n leë tabel:

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

Kom ons neem ook aan daar is 'n gegewe tweedimensionele skikking, byvoorbeeld, hierdie een:

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

Kom ons maak 'n HTML tabel gebaseer op hierdie skikking, gevul met die elemente van die gegewe skikking. Dit beteken ons sal 'n tabel met drie rye kry, met 4 selle in elk.

Laat ons die probleem oplos deur twee geneste for-of lusse te gebruik:

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);
}

Soos jy kan sien, is ons oplossing universeel en hang dit nie af van die aantal sub-skikkings of die aantal elemente in elke sub-skikking nie. Die enigste voorwaarde is dat die sub-skikkings dieselfde aantal elemente moet hê.

Gegewe die skikking:

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

Sonder om na die teoretiese deel van die les te kyk, vertoon die elemente van die gegewe skikking as 'n HTML table tabel.

Wysig die vorige taak sodat die tabel nie die elemente bevat nie, maar die vierkante van daardie elemente.