Création d'un tableau HTML à partir d'un tableau en JavaScript

Supposons que nous ayons un tableau vide :

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

Supposons également que nous ayons un tableau bidimensionnel, par exemple, comme celui-ci :

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

Créons un tableau HTML basé sur ce tableau, rempli avec les éléments de ce tableau. Autrement dit, nous obtiendrons un tableau avec trois rangées, chacune contenant 4 cellules.

Résolvons le problème en utilisant deux boucles for-of imbriquées :

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

Comme vous pouvez le voir, notre solution s'est avérée universelle et ne dépend pas du nombre de sous-tableaux ni du nombre d'éléments dans chaque sous-tableau. La seule condition est que les sous-tableaux aient le même nombre d'éléments.

Soit le tableau :

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

Sans regarder la partie théorique de la leçon, affichez les éléments du tableau donné sous la forme d'un tableau HTML table.

Modifiez le problème précédent pour que ce ne soient pas les éléments qui soient inscrits dans le tableau, mais leurs carrés.