Sequentielles Befüllen von HTML-Tabellen

Nehmen wir an, wir haben eine solche leere HTML-Tabelle:

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

Lassen Sie uns diese Tabelle mit Zellen füllen und dafür sorgen, dass in diesen Zellen die Zahlen von 1 bis 9 stehen. Hier ist ein Beispiel, was wir erhalten sollten:

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

Lassen Sie uns mit der Implementierung beginnen.

Lassen Sie uns zunächst einfach eine Tabelle der Größe 3 mal 3 erstellen, gefüllt mit dem Buchstaben '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);
}

Lassen Sie uns nun dafür sorgen, dass statt des Buchstabens 'x' in die Zellen aufsteigende Zahlen geschrieben werden.

Dazu müssen wir einen weiteren Zähler einführen, der sequentiell seine Werte in jeder Iteration der inneren Schleife erhöht, wie folgt:

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

let k = 1; // Startwert des Zählers
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; // Schreibt den Zähler in die Zelle
		k++; // Erhöht den Zähler
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Geben Sie eine HTML-Tabelle der Größe 5 Zeilen mal 5 Spalten aus, sodass in ihren Zellen sequentiell die Zahlen von 1 bis 25 stehen.

Modifizieren Sie die vorherige Aufgabe so, dass in den Zellen der Tabelle die geraden Zahlen im Bereich von 2 bis 50 geschrieben stehen.