Секвенцијално попуњавање 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.