Een HTML-tabel maken van een array in JavaScript

Stel we hebben een lege tabel:

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

Stel we hebben ook een tweedimensionale array, bijvoorbeeld deze:

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

Laten we op basis van deze array een HTML-tabel maken, gevuld met de elementen van deze array. Dat betekent dat we een tabel krijgen met drie rijen, in elk waarvan 4 cellen zitten.

Laten we het probleem oplossen met twee geneste for-of loops:

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

Zoals je ziet, is onze oplossing universeel geworden en hangt het niet af van het aantal subarrays en het aantal elementen in elke subarray. De enige voorwaarde is dat de subarrays hetzelfde aantal elementen moeten hebben.

Gegeven is de array:

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

Zonder in het theoretische deel van de les te spieken, geef de elementen van de gegeven array weer in de vorm van een HTML-tabel table.

Pas de vorige opdracht aan zodat in de tabel niet de elementen worden geschreven, maar de kwadraten van deze elementen.