Διαδοχική Πλήρωση Πινάκων HTML

Ας υποθέσουμε ότι έχουμε τον ακόλουθο κενό πίνακα HTML:

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

Ας γεμίσουμε αυτόν τον πίνακα με κελιά και ας κάνουμε έτσι ώστε σε αυτά τα κελιά να υπάρχουν αριθμοί από το 1 έως το 9. Ακολουθεί ένα παράδειγμα του τι πρέπει να προκύψει:

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

Ας προχωρήσουμε στην υλοποίηση.

Αρχικά, ας φτιάξουμε απλώς έναν πίνακα διαστάσεων 3 επί 3, γεμάτο με το γράμμα '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);
}

Ας κάνουμε τώρα έτσι ώστε αντί για το γράμμα 'x' στα κελιά να γράφονται αριθμοί με αύξουσα σειρά.

Για αυτό, πρέπει να εισάγουμε έναν ακόμη μετρητή, ο οποίος θα αυξάνει διαδοχικά τις τιμές του σε κάθε επανάληψη του εσωτερικού βρόχου, ως εξής:

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

let k = 1; // αρχική τιμή μετρητή
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; // γράφουμε τον μετρητή στο κελί
		k++; // αυξάνουμε τον μετρητή
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Εμφανίστε στην οθόνη έναν πίνακα HTML διαστάσεων 5 σειρών επί 5 στηλών, έτσι ώστε στα κελιά του να υπάρχουν διαδοχικά οι αριθμοί από το 1 έως το 25.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε στα κελιά του πίνακα να είναι εγγεγραμμένοι οι ζυγοί αριθμοί στο διάστημα από το 2 έως το 50.