JavaScript භාවිතයෙන් HTML වගු නිර්මාණය කිරීම සඳහා ශ්‍රිතය

දැන් අපි 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);
}