Zaporedno zapolnjevanje HTML tabel

Recimo, da imamo prazno HTML tabelo, kot je ta:

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

Zapolnimo to tabelo s celicami in naredimo tako, da so v teh celicah številke od 1 do 9. Tu je primer, kaj bi morali pridobiti:

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

Pristopimo k implementaciji.

Za začetek preprosto naredimo tabelo velikosti 3 krat 3, zapolnjeno s črkami '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);
}

Sedaj naredimo tako, da se namesto črk 'x' v celice zapišejo številke v naraščajočem vrstnem redu.

Za to moramo vnesti še en števec, ki bo zaporedno povečeval svoje vrednosti v vsaki iteraciji notranje zanke, takole:

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

let k = 1; // začetna vrednost števca
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; // zapišemo števec v celico
		k++; // povečamo števec
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Prikažite HTML tabelo velikosti 5 vrstic na 5 stolpcev tako, da v njenih celicah zaporedno stojijo številke od 1 do 25.

Spremenite prejšnjo nalogo tako, da v celicah tabele so zapisana soda števila v intervalu od 2 do 50.