Секвенцијално пополнување на 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);
}

Прикажете на екран HTML табела со големина 5 редови на 5 колони така што во нејзините ќелии секвенцијално ќе стојат броеви од 1 до 25.

Модифицирајте ја претходната задача така што во ќелиите на табелата ќе бидат запишани парни броеви во опсег од 2 до 50.