Popolamento sequenziale di tabelle HTML

Supponiamo di avere una tabella HTML vuota come questa:

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

Compiliamo questa tabella con celle e facciamo in modo che in queste celle ci siano numeri da 1 a 9. Ecco un esempio di ciò che dovremmo ottenere:

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

Iniziamo l'implementazione.

Per cominciare, creiamo semplicemente una tabella di dimensione 3 per 3, riempita con la lettera '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);
}

Ora modifichiamolo in modo che invece della lettera 'x' nelle celle vengano scritti numeri in ordine crescente.

Per fare questo, dobbiamo introdurre un altro contatore, che incrementerà sequenzialmente i suoi valori in ogni iterazione del ciclo interno, in questo modo:

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

let k = 1; // valore iniziale del contatore
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; // scriviamo il contatore nella cella
		k++; // incrementiamo il contatore
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Visualizza una tabella HTML di dimensione 5 righe per 5 colonne in modo che nelle sue celle ci siano sequenzialmente i numeri da 1 a 25.

Modifica il problema precedente in modo che nelle celle della tabella siano scritti i numeri pari nell'intervallo da 2 a 50.