JavaScript භාවිතයෙන් HTML වගු සෑදීම

අප සතුව මේ වගේ හිස් HTML වගුවක් ඇතැයි සිතමු:

<table id="table"></table>

අපි මෙම වගුව පේළි සහ තීරු වලින් පුරවමු. අපට ලැබිය යුතු දෙයට උදාහරණයක් මෙන්න:

<table id="table">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

ගැටලුව විසඳීම සඳහා අපට ස්ථර දෙකක ලූප (nested loops) දෙකක් අවශ්‍ය වේ. පළමු ලූපය වගු පේළි සාදනු ඇත, දෙවැන්න - සෑම පේළියකම කොටු:

let table = document.querySelector('#table');

for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

හිස් HTML වගුවක් ලබා දී ඇත. ස්ථර දෙකක ලූප for භාවිතා කර මෙම වගුව පේළි 5 කින් සහ තීරු 5 කින් පුරවන්න.

කලින් ගැටලුව වෙනස් කරන්න, එවිට වගුව පේළි 10 ක් සහ තීරු 5 ක් ලෙස සාදනු ලබයි.

කලින් ගැටලුව වෙනස් කරන්න, එවිට සෑම td කොටුවකටම 'x' යන පෙළ එකතු වේ.

වගු උත්පාදකයක් (generator) ක්‍රියාත්මක කරන්න, වගුවේ පළල සහ උස දෙයින් (උදාහරණයක් ලෙස, කොටු 5 කින් 10 ක වගුව).