Funktion zur Erstellung von HTML-Tabellen in JavaScript

Lassen Sie uns nun die Funktion createTable erstellen, die eine Tabelle mit vorgegebener Größe erzeugen und am Ende eines bestimmten Elements einfügen wird.

Lassen Sie die Funktion als ersten Parameter die Anzahl der Zeilen, als zweiten Parameter die Anzahl der Spalten und als dritten Parameter eine Referenz auf das DOM-Element empfangen, innerhalb dessen unsere Tabelle erstellt werden soll.

Lassen Sie uns einen Blick darauf werfen, wie wir die beschriebene Funktion nutzen werden, wenn sie erstellt ist. Nehmen wir zum Beispiel an, wir haben diesen Div gegeben:

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

Lassen Sie uns innerhalb dieses Divs eine Tabelle 3 mal 4 erstellen:

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

Nehmen wir nun an, wir haben zwei Divs gegeben:

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

Lassen Sie uns in jedem dieser Divs eine eigene Tabelle erstellen:

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

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

Damit die erstellten Tabellen sofort sichtbar sind, kann man etwas CSS hinzufügen, zum Beispiel dieses:

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

Hier ist der Entwurf der beschriebenen Funktion:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// hier erstellen wir eine Tabelle mit rows Zeilen und cols Spalten
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Vervollständigen Sie den Code des oben dargestellten Funktionsentwurfs. Testen Sie die Arbeit der fertigen Funktion.