HTML cədvəllərinin ardıcıl doldurulması
Tutaq ki, bizim belə boş bir HTML cədvəlimiz var:
<table id="table"></table>
Gəlin bu cədvəli xanalarla dolduraq və edək ki,
bu xanalarda 1-dən 9-a qədər rəqəmlər olsun.
Budur, bizim əldə etməli olduğumuz nəticənin nümunəsi:
<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>
Gəlin realizasiyaya başlayaq.
Əvvəlcə gəlin sadəcə 3-ə 3 ölçülü,
hər yerində 'x' hərfləri olan bir cədvəl edək:
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);
}
Gəlin indi elə edək ki, xanalarda 'x' hərfləri əvəzinə
artan sıra ilə rəqəmlər yazılsın.
Bunun üçün bizə daxili dövrənin hər bir təkrarlanmasında ardıcıl olaraq dəyərlərini artıracaq başqa bir sayğac daxil etmək lazımdır, budur belə:
let table = document.querySelector('#table');
let k = 1; // sayğacın başlanğıc dəyəri
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; // sayğacı xanaya yazırıq
k++; // sayğacı artırırıq
tr.appendChild(td);
}
table.appendChild(tr);
}
Ekranda ölçüsü 5 sıra 5 sütun olan HTML cədvəlini
elə çap edin ki, onun xanalarında 1-dən 25-ə qədər
rəqəmlər ardıcıl olaraq dur sun.
Əvvəlki məsələni elə dəyişin ki, cədvəlin xanalarında
2-dən 50-ə qədər olan cüt rəqəmlər yazılsın.