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:

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

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

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

Nehmen wir nun an, wir haben zwei Divs gegeben:

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

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

javascriptlet 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:

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

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