Funkcja do tworzenia tabel HTML w JavaScript

Stwórzmy teraz funkcję createTable, która będzie tworzyć tabelę o podanym rozmiarze i dodawać ją na koniec podanego elementu.

Niech pierwszy parametr naszej funkcji przyjmuje liczbę wierszy, drugi parametr - liczbę kolumn, a trzeci - referencję do elementu DOM, wewnątrz którego będzie tworzona nasza tabela.

Spójrzmy, jak będziemy używać opisanej funkcji, gdy już zostanie stworzona. Załóżmy, na przykład, że mamy taki div:

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

Stwórzmy wewnątrz tego diva tabelę 3 na 4:

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

Załóżmy teraz, że mamy dwa divy:

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

Stwórzmy własną tabelę w każdym z tych divów:

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

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

Aby tworzone tabele od razu były widoczne, można dodać jakiś CSS, na przykład taki:

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

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // tutaj tworzymy tabelę z rows wierszami i cols kolumnami
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}