HTML ცხრილების შექმნის ფუნქცია JavaScript-ში

ახლა კი დავწეროთ ფუნქცია createTable, რომელიც შექმნის მითითებული ზომის ცხრილს და დაამატებს მას მითითებული ელემენტის ბოლოში.

ჩვენი ფუნქცია პირველ პარამეტრად მიიღებს რიგების რაოდენობას, მეორე პარამეტრად - სვეტების რაოდენობას, ხოლო მესამედ - DOM ელემენტის მითითებას, რომლის შიგნითაც შეიქმნება ჩვენი ცხრილი.

შევხედოთ, როგორ გამოვიყენებთ აღწერილ ფუნქციას, როდესაც ის შექმნილი იქნება. მაგალითად, დავუშვათ, გვაქვს მოცემული ასეთი div:

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

მოდით, ამ div-ის შიგნით შევქმნათ ცხრილი 3 სიგრძის 4 სიგანის:

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

ახლა დავუშვათ, გვაქვს მოცემული ორი div:

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

მოდით, თითოეულ ამ div-ში შევქმნათ საკუთარი ცხრილი:

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

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

იმისთვის, რომ შექმნილი ცხრილები მაშინვე იყოს ხილული, შეგიძლიათ დაამატოთ რაიმე CSS, მაგალითად, ასეთი:

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

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // აქ შევქმნით ცხრილს rows რიგებით და cols სვეტებით
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}