Funkcija HTML tabulu izveidei ar JavaScript

Tagad izveidosim funkciju createTable, kura izveidos noteikta izmēra tabulu un pievienos to norādītā elementa beigās.

Lai mūsu funkcija pirmo parametru pieņem rindu skaitu, otro parametru - kolonnu skaitu, un trešo - atsauci uz DOM elementu, kura iekšienē tiks izveidota mūsu tabula.

Apskatīsim, kā mēs izmantosim aprakstīto funkciju, kad tā tiks izveidota. Pieņemsim, piemēram, ka mums ir dots šāds div:

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

Izveidosim šī div iekšienē tabulu 3 x 4:

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

Pieņemsim, ka mums ir doti divi divi:

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

Izveidosim savu tabulu katrā no šiem diviem:

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

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

Lai izveidotās tabulas uzreiz būtu redzamas, var pievienot kādu CSS, piemēram, šādu:

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

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // šeit izveidosim tabulu ar rows rindām un cols kolonnām
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}