Erstellen einer HTML-Tabelle aus einem Array in JavaScript

Nehmen wir an, wir haben eine leere Tabelle:

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

Nehmen wir weiter an, es liegt ein zweidimensionales Array vor, zum Beispiel dieses:

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

Lassen Sie uns auf Basis dieses Arrays eine HTML-Tabelle erstellen, die mit den Elementen dieses Arrays gefüllt ist. Das heißt, wir erhalten eine Tabelle mit drei Zeilen, in denen sich jeweils 4 Zellen befinden.

Lösen wir die Aufgabe mit zwei verschachtelten for-of Schleifen:

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

Wie Sie sehen, ist unsere Lösung universell geworden und hängt nicht von der Anzahl der Unterarrays oder der Anzahl der Elemente in jedem Unterarray ab. Die einzige Bedingung ist, dass die Unterarrays die gleiche Anzahl an Elementen enthalten müssen.

Gegeben ist das Array:

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

Versuchen Sie, ohne in den theoretischen Teil der Lektion zu schauen, die Elemente des gegebenen Arrays als HTML-Tabelle table auszugeben.

Modifizieren Sie die vorherige Aufgabe so, dass in die Tabelle nicht die Elemente, sondern die Quadrate dieser Elemente geschrieben werden.