Kujaza Jedwali la HTML Kwa Mtiririko

Wacha tuwe na jedwali tupu la HTML kama hili:

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

Wacha tujaze jedwali hili na seli na tufanye nambari katika seli hizo ziwe kutoka 1 hadi 9. Hapa kuna mfano wa kile tunachopaswa kupata:

<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>

Wacha tuanze utekelezaji.

Kwanza kabisa, wacha tufanye jedwali la ukubwa 3 kwa 3, lijazwe kwa herufi '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);
}

Wacha sasa tufanye badala ya herufi 'x' kwenye seli ziandikwe nambari kwa kupanda.

Ili kufanya hivyo, ni lazima tuanzishe kihesabu kingine ambacho kitazidi thamani yake kwa mtiririko katika kila iteration ya kitanzi cha ndani, kama hivi:

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

let k = 1; // thamani ya mwanzo ya kihesabu
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; // tunaandika kihesabu kwenye seli
		k++; // tunaongeza kihesabu
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Onyesha kwenye skrini jedwali la HTML la ukubwa wa safu 5 kwa nguzo 5, ili katika seli zake ziwe na nambari kwa mtiririko kutoka 1 hadi 25.

Rekebisha shida iliyotangulia, ili katika seli za jedwali ziandikwe nambari shufwa katika kipindi kutoka 2 hadi 50.