В предыдущих уроках для поиска, к примеру, колонок таблицы мы использовали свои атрибуты 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 = '!';
}
Найдите все ячейки третьего столбца и покрасьте их в красный фон.
Найдите третью ячейку первого ряда и покрасьте ее в красный фон.
Найдите все четные ряды и покрасьте в них все нечетные ячейки.