JavaScript භාවිතයෙන් HTML වගු නිර්මාණය කිරීම සඳහා ශ්රිතය
දැන් අපි createTable ශ්රිතය සාදමු,
එය නිශ්චිත ප්රමාණයේ වගුවක් නිර්මාණය කර
දී ඇති මූලද්රව්යයක අවසානයට එය එක් කරනු ඇත.
අපගේ ශ්රිතය පළමු පරාමිතිය ලෙස පේළි ගණන, දෙවන පරාමිතිය ලෙස තීරු ගණන, තෙවන පරාමිතිය ලෙස DOM මූලද්රව්යයකට සම්බන්ධතාවය පිළිගනිමු, එහි ඇතුළත අපගේ වගුව නිර්මාණය වනු ඇත.
අපි දැන් බලමු විස්තර කර ඇති ශ්රිතය සාදනු ලැබූ විට අපි එය භාවිතා කරන ආකාරය. උදාහරණයක් ලෙස, අපට මෙවැනි div එකක් දී ඇතැයි සිතමු:
<div id="elem"></div>
මෙම div එක තුළ වගුවක් සාදමු
3 ක 4:
let div = document.querySelector('#elem');
createTable(3, 4, div);
දැන් අපට div දෙකක් දී ඇතැයි සිතමු:
<div id="elem1"></div>
<div id="elem2"></div>
මෙම div එක් එක් තුළ තමන්ගේම වගුවක් සාදමු:
let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);
let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);
නිර්මාණය කරන වගු ක්ෂණිකව දෘශ්යමාන වන පරිදි, යම් CSS එකක් එක් කළ හැකිය, උදාහරණයක් ලෙස, මෙවැනි:
td {
width: 50px;
height: 50px;
border: 1px solid black;
}
මෙන්න විස්තර කර ඇති ශ්රිතයේ හැඩතලය:
function createTable(rows, cols, parent) {
let table = document.createElement('table');
// මෙහි අපි පේළි rows ක සහ තීරු cols ක වගුවක් නිර්මාණය කරමු
for () {
for () {
}
}
parent.appendChild(table);
}
ඉහත දක්වා ඇති ශ්රිතයේ හැඩතලයේ කේතය පුරවන්න. සම්පූර්ණ කරන ලද ශ්රිතයේ ක්රියාකාරීත්වය පරීක්ෂා කරන්න.
