Secīga HTML tabulu aizpildīšana

Pieņemsim, ka mums ir šāda tukša HTML tabula:

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

Aizpildīsim šo tabulu ar šūnām un padarīsim tā, lai šajās šūnās būtu skaitļi no 1 līdz 9. Šeit ir piemērs tam, kas mums vajadzētu iegūt:

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

Sāksim realizāciju.

Sākumā vienkārši izveidosim tabulu izmērā 3 uz 3, aizpildītu ar burtiem '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);
}

Tagad padarīsim tā, lai vietā burtiem 'x' šūnās tiktu ierakstīti skaitļi augošā secībā.

Lai to izdarītu, mums jāievēl vēl viens skaitītājs, kas secīgi palielinās savas vērtības katrā iekšējā cikla iterācijā, šādi:

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

let k = 1; // skaitītāja sākotnējā vērtība
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; // ierakstām skaitītāju šūnā
		k++; // palielinām skaitītāju
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Parādiet ekrānā HTML tabulu izmērā 5 rindas uz 5 kolonnām tā, lai tās šūnās secīgi atrastos skaitļi no 1 līdz 25.

Modificējiet iepriekšējo uzdevumu tā, lai tabulas šūnās būtu ierakstīti pāra skaitļi intervālā no 2 līdz 50.