JavaScript | Как установить цвет фона для ячейки HTML-таблицы? — efim360.ru

JavaScript | Как установить цвет фона для ячейки HTML-таблицы?

У нас есть примитивная таблица в HTML-разметке (скопируй код себе, чтобы потренироваться):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div align="center">

        <table>

        <thead>

        <tr>

        <th>1</th>

        <th>2</th>

        <th>3</th>

        </tr>

        </thead>

        <tbody>

        <tr>

        <th>qwe</th>

        <th>asd</th>

        <th>zxc</th>

        </tr>

        </tbody>

        </table>

    </div>

</body>

</html>

Визуально в браузере это выглядит так:

Таблица в HTML-разметке на одну запись с тремя столбцами
Таблица в HTML-разметке на одну запись с тремя столбцами

 

Мы хотим поменять цвет средней ячейки, которая содержит слово "asd". Как это сделать?

 

Получение объекта ячейки

Получаем сам объект ячейки с нужным нам словом. Например так (актуально для нашего случая):

document.querySelector("body > div > table > tbody > tr > th:nth-child(2)")

Если смотреть в браузере на вкладке Console, то отобразить объект со всеми его свойствами можно командой:

console.dir(document.querySelector("body > div > table > tbody > tr > th:nth-child(2)"))

Вывод будет выглядеть так:

Вывели свойства объекта HTML-элемента в консоль браузера
Вывели свойства объекта HTML-элемента в консоль браузера

 

Получение свойства, отвечающего за графическое оформление

Среди всех его свойств нас будет интересовать свойство "style", которое хранит объект класса CSSStyleDeclaration, описанного в стандарте CSSOM.

Свойство style в экземпляре HTMLTableCellElement - JavaScript
Свойство style в экземпляре HTMLTableCellElement - JavaScript

 

Получение свойства, отвечающего за цвет заднего фона для HTML-элемента

В свою очередь, экземпляр CSSStyleDeclaration хранит свойство "backgroundColor", которое в данный момент имеет значение пустой строки.

Свойство backgroundColor объекта CSSStyleDeclaration равно пустой строке - JavaScript
Свойство backgroundColor объекта CSSStyleDeclaration равно пустой строке - JavaScript

Именно это свойство нам нужно поправить, чтобы реально-отображаемый цвет ячейки таблицы изменился.

То есть нам нужно написать строку в синтаксисе, понятном для анализатора цветов в CSS. Это тема отдельного занятия, поэтому я просто буду использовать цвет "rgb(255 255 0)".

 

Обновление цвета ячейки таблицы при помощи JavaScript

Теперь мы можем выстроить цепочку выражений, которые установят жёлтый цвет фона для ячейки посередине.

document.querySelector("body > div > table > tbody > tr > th:nth-child(2)").style.backgroundColor = 'rgb(255 255 0)'

Получаем запланированный результат:

Изменили цвет ячейки таблицы на жёлтый - JavaScript
Изменили цвет ячейки таблицы на жёлтый - JavaScript

Изменения можно также увидеть в разметке документа.

Изменилась разметка HTML-элемента ячейки таблицы - добавился атрибут style
Изменилась разметка HTML-элемента ячейки таблицы - добавился атрибут style

 

Информационные ссылки

Стандарт ECMAScript - https://tc39.es/ecma262/multipage/

Стандарт DOM - https://dom.spec.whatwg.org