Поиск ячеек таблицы через селектор CSS на JavaScript

В предыдущих уроках для поиска, к примеру, колонок таблицы мы использовали свои атрибуты data-. На самом деле это не является не обязательным и для решения многих задач можно использовать селекторы CSS.

К примеру, в следующем коде мы найдем вторую ячейку третьего ряда:

let td = document.querySelector('#table tr:nth-child(3) td:nth-child(2)');

А в следующем коде мы находим все ячейки второй колонки таблицы:

let tds = document.querySelectorAll('#table td:nth-child(2)');

for (let td of tds) {
	td.innerHTML = '!';
}

А теперь найдем вторые ячейки всех нечетных рядов:

let tds = document.querySelectorAll('#table tr:nth-child(odd) td:nth-child(2)');

for (let td of tds) {
	td.innerHTML = '!';
}

Найдите все ячейки третьего столбца и покрасьте их в красный фон.

Найдите третью ячейку первого ряда и покрасьте ее в красный фон.

Найдите все четные ряды и покрасьте в них все нечетные ячейки.