Поиск ячеек таблицы с помощью атрибута data

Сейчас мы с вами научимся осуществлять сложный поиск по HTML таблице. Например, мы научимся находить колонки таблицы или ее диагонали.

Пусть у нас есть некоторая HTML таблица, в которой через атрибут data-col для каждой ячейки проставлен номер колонки, которой принадлежит ячейка:

<table id="table"> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> </table>

Пусть перед нами стоит задача по нахождению ячеек определенной колонки, например, колонки с номером 2. Для решения задачи можно воспользоваться CSS селектором поиска по атрибуту и его значению, вот так:

let tds = document.querySelectorAll('#table td[data-col="2"]'); for (let td of tds) { this.innerHTML = '!'; }

Пусть теперь номер колонки хранится в какой-то переменной. В этом случае нам необходимо будет использовать операцию сложения строк:

let col = 2; let tds = document.querySelectorAll('#table td[data-col="' + col + '"]'); for (let td of tds) { this.innerHTML = '!'; }

Дана следующая HTML таблица:

<table id="table"> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> <tr> <td data-col="1"></td> <td data-col="2"></td> <td data-col="3"></td> </tr> </table> td { width: 50px; height: 50px; border: 1px solid black; }

Сделайте так, чтобы по клику на любую ячейку в красный фон красились все ячейки этой колонки.

Дана следующая HTML таблица:

<table id="table"> <tr> <td data-row="1" data-col="1"></td> <td data-row="1" data-col="2"></td> <td data-row="1" data-col="3"></td> </tr> <tr> <td data-row="2" data-col="1"></td> <td data-row="2" data-col="2"></td> <td data-row="2" data-col="3"></td> </tr> <tr> <td data-row="3" data-col="1"></td> <td data-row="3" data-col="2"></td> <td data-row="3" data-col="3"></td> </tr> </table>

Даны также две переменные, в которых хранятся номер колонки и номер ряда:

let col = 2; let row = 3;

Сделайте кнопку, по нажатию на которую в красный фон покрасится та ячейка, номер которой совпадает с номером из переменных.