HTML වගු අනුක්‍රමිකව පුරවා ගැනීම

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

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

අපි මෙම වගුව කොටු වලින් පුරවා ගෙන, මෙම කොටුවල අංක 1 සිට 9 දක්වා යන ආකාරයට ලියන්නමු. අපට ලැබිය යුතු අවසාන ප්‍රතිඵලය මෙන්න:

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

දැන් අපි ක්‍රියාත්මක කිරීමට පිවිසෙමු.

පළමුව, අපි සරලවම 3 පේළි හා 3 නැංගුරම් වලින් යුත් වගුවක් සාදමු. එය 'x' අකුරින් පුරවමු:

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');
		td.textContent = 'x';
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

දැන්, අපි 'x' අකුර වෙනුවට කොටු වලට අංක අධිකරණය වන පරිදි ලියන්නේ කෙසේදැයි බලමු.

මේ සඳහා, අපට තවත් ගණකයක් හඳුන්වා දිය යුතුය. එය අභ්‍යන්තර ලූපයේ සෑම පුනරාවර්තනයකදීම අනුක්‍රමිකව අගය වැඩි කරයි, මේ ආකාරයට:

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

let k = 1; // ගණකයේ ආරම්භක අගය
for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		
		td.textContent = k; // ගණකයේ අගය කොටුවට ලියන්න
		k++; // ගණකය වැඩි කරන්න
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

5 පේළි හා 5 නැංගුරම් වලින් යුත් HTML වගුවක් තිරය මත පෙන්වන්න. එහි කොටු වලට 1 සිට 25 දක්වා අංක අනුක්‍රමිකව ලියා තිබිය යුතුය.

පෙර කාර්යය වෙනස් කරන්න, වගු කොටු වලට 2 සිට 50 දක්වා පරතරය තුළ ඇති ඉරට්ටේ අංක ලියා තිබිය යුතුය.