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-მდე.