Δημιουργία πίνακα HTML από πίνακα σε JavaScript

Ας υποθέσουμε ότι έχουμε έναν κενό πίνακα:

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

Ας υποθέσουμε επίσης ότι μας δίνεται ένας δισδιάστατος πίνακας, για παράδειγμα, ο ακόλουθος:

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

Ας δημιουργήσουμε βασισμένοι σε αυτόν τον πίνακα έναν πίνακα HTML γεμάτο με στοιχεία αυτού του πίνακα. Δηλαδή, θα έχουμε έναν πίνακα με τρεις σειρές, σε καθεμία από τις οποίες θα υπάρχουν 4 κελιά.

Ας λύσουμε το πρόβλημα χρησιμοποιώντας δύο ένθετους βρόχους 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);
}

Όπως βλέπετε, η λύση μας αποδείχθηκε καθολική και δεν εξαρτάται από τον αριθμό των υποπινάκων και τον αριθμό των στοιχείων σε κάθε υποπίνακα. Η μόνη προϋπόθεση είναι ότι οι υποπίνακες πρέπει να έχουν τον ίδιο αριθμό στοιχείων.

Δίνεται ο πίνακας:

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

Χωρίς να κοιτάξετε το θεωρητικό μέρος του μαθήματος, εμφανίστε τα στοιχεία του δεδομένου πίνακα σε μορφή πίνακα HTML table.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε στον πίνακα να καταγράφονται όχι τα στοιχεία, αλλά τα τετράγωνα αυτών των στοιχείων.