Последовательное заполнение 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.