Fonction pour créer des tableaux HTML en JavaScript

Maintenant, créons une fonction createTable, qui créera un tableau d'une taille donnée et l'ajoutera à la fin d'un élément donné.

Que le premier paramètre de notre fonction reçoive le nombre de lignes, le deuxième paramètre - le nombre de colonnes, et le troisième - une référence à l'élément DOM à l'intérieur duquel notre tableau sera créé.

Voyons comment nous utiliserons la fonction décrite une fois qu'elle sera créée. Supposons, par exemple, que nous ayons un div comme celui-ci :

<div id="elem"></div>

Créons un tableau à l'intérieur de ce div de 3 sur 4 :

let div = document.querySelector('#elem');
createTable(3, 4, div);

Supposons maintenant que nous ayons deux divs :

<div id="elem1"></div>
<div id="elem2"></div>

Créons notre propre tableau dans chacun de ces divs :

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

Afin que les tableaux créés soient immédiatement visibles, vous pouvez ajouter un peu de CSS, par exemple, comme celui-ci :

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

Voici l'ébauche de la fonction décrite :

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// ici nous allons créer un tableau avec rows lignes et cols colonnes
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Complétez le code de l'ébauche de fonction présentée ci-dessus. Testez le fonctionnement de la fonction finale.