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

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

 

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

Стандарт ECMAScripthttps://tc39.es/ecma262/multipage/

Стандарт DOMhttps://dom.spec.whatwg.org