Funksjon for å opprette HTML-tabeller i JavaScript

La oss nå lage funksjonen createTable, som vil opprette en tabell med gitt størrelse og legge den til slutten av et gitt element.

La den første parameteren til funksjonen vår være antall rader, den andre parameteren - antall kolonner, og den tredje - en referanse til DOM-elementet, inni som tabellen vår vil bli opprettet.

La oss se hvordan vi vil bruke den beskrevne funksjonen når den er opprettet. La oss for eksempel si at vi har gitt denne div-en:

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

La oss lage en tabell inni denne div-en 3 på 4:

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

La oss nå si at vi har gitt to div-er:

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

La oss lage vår egen tabell i hver av disse div-ene:

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

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

For at de opprettede tabellene umiddelbart skal være synlige, kan du legge til litt CSS, for eksempel slik:

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

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // her oppretter vi en tabell med rows rader og cols kolonner
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}