Creazione di una tabella HTML da un array in JavaScript

Supponiamo di avere una tabella vuota:

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

Supponiamo inoltre di avere un array bidimensionale, ad esempio, il seguente:

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

Creiamo una tabella HTML basata su questo array, riempita con gli elementi dell'array stesso. Ovvero, avremo una tabella con tre righe, ciascuna delle quali avrà 4 celle.

Risolviamo il problema utilizzando due cicli for-of annidati:

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

Come puoi vedere, la nostra soluzione è universale e non dipende dal numero di sottoarray e dal numero di elementi in ciascun sottoarray. L'unica condizione è che i sottoarray abbiano lo stesso numero di elementi.

Dato l'array:

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

Senza guardare la parte teorica della lezione, visualizza gli elementi dell'array dato sotto forma di tabella HTML table.

Modifica il problema precedente in modo che nella tabella vengano scritti non gli elementi, ma i loro quadrati.