Пусть у нас есть вот такая пустая 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.innerHTML = '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.innerHTML = k; // записываем счетчик в ячейку
k++; // увеличиваем счетчик
tr.appendChild(td);
}
table.appendChild(tr);
}
Выведите на экран таблицу table
размером
5
рядов на 5
колонок так, чтобы
в ее ячейках последовательно стояли числа
от 1
до 25
.
Модифицируйте предыдущую задачу так, чтобы
в ячейках таблицы были записаны четные числа
в промежутке от 2
до 50
.