HTML lentelių užpildymas

Tarkime, kad turime tokią tuščią HTML lentelę:

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

Užpildykime šią lentelę langeliais ir padarykime taip, kad šiuose languose būtų skaičiai nuo 1 iki 9. Štai pavyzdys, ką turėtume gauti:

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

Pradėkime įgyvendinimą.

Pirmiausia tiesiog sukurkime lentelę dydžio 3 x 3, užpildytą raidėmis '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);
}

Dabar padarykime taip, kad vietoj raidžių 'x' langeliuose būtų skaičiai didėjimo tvarka.

Norėdami tai padaryti, turime įvesti dar vieną skaitiklį, kuris nuosekliai didins savo reikšmes kiekvienoje vidinio ciklo iteracijoje, štai taip:

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

let k = 1; // pradinė skaitiklio reikšmė
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; // įrašome skaitiklį į langelį
		k++; // didiname skaitiklį
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Atvaizduokite ekrane HTML lentelę, kurios dydis 5 eilučių x 5 stulpelių, taip kad jos languose nuosekliai būtų skaičiai nuo 1 iki 25.

Modifikuokite ankstesnį uždavinį taip, kad lentelės languose būtų užrašyti lyginiai skaičiai intervale nuo 2 iki 50.