HTML tabelite järjestikune täitmine
Oletame, et meil on selline tühi HTML tabel:
<table id="table"></table>
Täidame selle tabeli lahtritega ja paneme
need lahtrid sisaldama numbreid 1
kuni 9. Siin on näide sellest, mida me peaksime
saama:
<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>
Hakkame rakendamisega pihta.
Alustuseks teeme lihtsalt tabeli
mõõtmetega 3 korda 3, mis on täidetud
tähtedega '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);
}
Teeme nüüd nii, et lahtritesse kirjutataks
kasvavas järjekorras numbreid
tähtede 'x' asemel.
Selleks peame kasutama veel üht loendurit, mis suurendab järjest oma väärtusi iga sisemise tsükli iteratsiooni jooksul, järgmiselt:
let table = document.querySelector('#table');
let k = 1; // loenduri algväärtus
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; // kirjutame loenduri lahtrisse
k++; // suurendame loendurit
tr.appendChild(td);
}
table.appendChild(tr);
}
Kuva ekraanile HTML tabel mõõtmetega
5 rida ja 5 veergu nii, et
selle lahtrites oleks järjestikused numbrid
alates 1 kuni 25.
Muutke eelmist ülesannet nii, et
tabeli lahtritesse oleks kirjutatud paarisarvud
vahemikus 2 kuni 50.