Sekventiel udfyldning af HTML-tabeller

Lad os sige, at vi har en tom HTML-tabel som denne:

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

Lad os udfylde denne tabel med celler og gøre så tallene fra 1 til 9 vises i disse celler. Her er et eksempel på, hvad vi skal opnå:

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

Lad os gå i gang med implementeringen.

Til at starte med, lad os bare lave en tabel med størrelsen 3 gange 3, fyldt med bogstavet '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);
}

Lad os nu gøre sådan, at i stedet for bogstavet 'x', bliver tallene skrevet i stigende rækkefølge i cellerne.

For at gøre dette er vi nødt til at introducere endnu en tæller, som sekventielt vil forøge sine værdier i hver iteration af den indre løkke, sådan her:

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

let k = 1; // startværdi for tælleren
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; // skriver tælleren i cellen
		k++; // forøger tælleren
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Vis en HTML-tabel på skærmen med størrelsen 5 rækker gange 5 kolonner, således at der i dens celler står tallene fra 1 til 25 i rækkefølge.

Modificer den forrige opgave, således at der i tabellens celler står lige tal i intervallet fra 2 til 50.