JavaScript'te HTML Tabloları Oluşturmak için Fonksiyon

Şimdi createTable fonksiyonunu yapalım, bu fonksiyon belirtilen boyutta bir tablo oluşturup onu belirtilen elementin sonuna ekleyecek.

Fonksiyonumuz ilk parametre olarak satır sayısını, ikinci parametre olarak sütun sayısını, üçüncü parametre olarak da tablomuzun içinde oluşturulacağı DOM elementinin referansını alsın.

Tasarladığımız fonksiyon oluşturulduğunda onunla nasıl çalışacağımıza bir bakalım. Örneğin, bize şöyle bir div verildiğini varsayalım:

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

Bu div'in içinde 3'e 4'lük bir tablo yapalım:

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

Şimdi bize iki div verildiğini varsayalım:

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

Bu div'lerin her birinde kendi tablomuzu yapalım:

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

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

Oluşturulan tabloların hemen görülebilmesi için biraz CSS ekleyebiliriz, örneğin şöyle:

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

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // burada rows satır ve cols sütundan oluşan tabloyu oluşturacağız
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}