Functie voor het maken van HTML-tabellen in JavaScript

Laten we nu een functie createTable maken, die een tabel van een opgegeven grootte zal aanmaken en deze aan het einde van een opgegeven element zal toevoegen.

Laat de eerste parameter van onze functie het aantal rijen zijn, de tweede parameter - het aantal kolommen, en de derde - een verwijzing naar het DOM-element, binnenin welk onze tabel zal worden gemaakt.

Laten we eens kijken hoe we de beschreven functie zullen gebruiken wanneer deze is gemaakt. Stel dat we bijvoorbeeld de volgende div hebben:

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

Laten we binnen deze div een tabel maken 3 bij 4:

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

Stel dat we nu twee div's hebben:

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

Laten we onze eigen tabel in elk van deze div's maken:

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

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

Om de gemaakte tabellen meteen zichtbaar te maken, kan wat CSS worden toegevoegd, bijvoorbeeld zoals deze:

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

Hier is de basis voor de beschreven functie:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// hier maken we een tabel met rows rijen en cols kolommen
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Voltooi de code van de bovenstaande functiebasis. Test de werking van de voltooide functie.