Opeenvolgende vulling van HTML-tabellen

Stel we hebben een lege HTML-tabel zoals deze:

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

Laten we deze tabel vullen met cellen en ervoor zorgen dat in deze cellen nummers van 1 tot 9 staan. Hier is een voorbeeld van wat we moeten bereiken:

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

Laten we beginnen met de implementatie.

Laten we eerst een tabel maken met formaat 3 bij 3, gevuld met de letter '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);
}

Laten we nu ervoor zorgen dat in plaats van de letter 'x' in de cellen, oplopende nummers worden geschreven.

Hiervoor moeten we nog een teller introduceren, die opeenvolgend zijn waarden zal verhogen in elke iteratie van de innerlijke lus, zoals hier:

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

let k = 1; // startwaarde van de teller
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; // schrijf de teller in de cel
		k++; // verhoog de teller
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Toon een HTML-tabel met formaat 5 rijen bij 5 kolommen, zodat in zijn cellen opeenvolgend nummers van 1 tot 25 staan.

Pas de vorige opdracht aan, zodat in de cellen van de tabel even nummers in het bereik van 2 tot 50 staan.