тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство cells

Свойство cells хранит коллекцию ячеек td и th строки tr. Применяется только к ряду таблицы.

Синтаксис

tr.cells

Пример

Давайте переберем все ряды таблицы с помощью свойства rows, а в каждом ряду переберем его ячейки с помощью свойства cells:

<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> let table = document.querySelector('#table'); for (let row of table.rows) { for (let cell of row.cells) { console.log(cell); } }

Пример

Давайте переберем все ряды таблицы с помощью свойства rows и узнаем количество ячеек в каждом ряду:

<table id="table"> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> </tr> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>2</td> </tr> </table> let table = document.querySelector('#table'); for (let row of table.rows) { console.log(row.cells.length); }

Пример

Установим фон первой ячейке:

<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> table, td { border: 1px solid black; } let table = document.querySelector('#table'); table.rows[0].cells[0].style.background = 'red';

:

Пример

Установим фон ячейкам таблицы по диагонали:

<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> table, td { border: 1px solid black; } let table = document.querySelector('#table'); let rows = table.rows; for (let i = 0; i < rows.length; i++) { rows[i].cells[i].style.background = 'red'; }

:

Смотрите также

  • свойство rows,
    которое содержит ряды таблицы
  • свойство tHead,
    которое содержит thead таблицы
  • свойство tFoot,
    которое содержит tfoot таблицы
  • свойство tBodies,
    которое содержит tbody таблицы