Funzione per creare tabelle HTML in JavaScript

Ora creiamo una funzione createTable, che creerà una tabella della dimensione specificata e la aggiungerà alla fine dell'elemento specificato.

Lasciamo che il primo parametro della nostra funzione accetti il numero di righe, il secondo parametro - il numero di colonne, e il terzo - un riferimento all'elemento DOM all'interno del quale verrà creata la nostra tabella.

Vediamo come utilizzeremo la funzione descritta, quando sarà creata. Supponiamo, ad esempio, che ci sia dato un div come questo:

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

Creiamo all'interno di questo div una tabella 3 per 4:

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

Supponiamo ora che ci siano dati due div:

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

Creiamo la nostra tabella in ciascuno di questi div:

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

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

Affinché le tabelle create siano immediatamente visibili, puoi aggiungere un po' di CSS, ad esempio così:

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

Ecco la bozza della funzione descritta:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// qui creeremo la tabella con rows righe e cols colonne
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Completate il codice della bozza della funzione presentata sopra. Testate il funzionamento della funzione finita.