Volgordelike Vul van HTML Tabelle

Laat ons sê ons het so 'n leë HTML tabel:

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

Kom ons vul hierdie tabel met selle en maak sodat hierdie selle getalle van 1 tot 9 bevat. Hier is 'n voorbeeld van wat ons moet kry:

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

Kom ons begin met die implementering.

Om te begin, laat ons net 'n tabel maak met grootte 3 by 3, gevul met letters '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);
}

Laat ons nou maak sodat in plaas van letters 'x' in die selle, getalle volgens volgorde geskryf word.

Om dit te doen, moet ons nog 'n teller invoer, wat sy waarde opeenvolgend sal verhoog in elke iterasie van die interne lus, soos hier:

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

let k = 1; // beginwaarde van die 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; // skryf die teller in die sel
		k++; // verhoog die teller
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Vertoon 'n HTML tabel met grootte 5 rye by 5 kolomme sodat in sy selle opeenvolgend getalle van 1 tot 25 staan.

Wysig die vorige taak sodat in die selle van die tabel ewe getalle in die reeks van 2 tot 50 geskryf is.