Sekwencyjne wypełnianie tabel HTML

Załóżmy, że mamy taką pustą tabelę HTML:

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

Wypełnijmy tę tabelę komórkami i sprawmy, aby w tych komórkach znajdowały się liczby od 1 do 9. Oto przykład tego, co powinniśmy uzyskać:

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

Przystąpmy do implementacji.

Na początek po prostu zróbmy tabelę o rozmiarze 3 na 3, wypełnioną literami '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);
}

Zróbmy teraz tak, aby zamiast liter 'x' w komórkach zapisywane były liczby rosnąco.

Aby to zrobić, musimy wprowadzić jeszcze jeden licznik, który będzie sekwencyjnie zwiększał swoje wartości w każdej iteracji wewnętrznej pętli, w ten sposób:

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

let k = 1; // początkowa wartość licznika
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; // zapisujemy licznik w komórce
		k++; // zwiększamy licznik
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Wyświetl na ekranie tabelę HTML o rozmiarze 5 wierszy na 5 kolumn tak, aby w jej komórkach znajdowały się sekwencyjnie liczby od 1 do 25.

Zmodyfikuj poprzednie zadanie tak, aby w komórkach tabeli były zapisane liczby parzyste w przedziale od 2 do 50.