Поиск ячеек таблицы с помощью атрибута 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) {
	td.innerHTML = '!';
}

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

let col = 2;
let tds = document.querySelectorAll('#table td[data-col="' + col + '"]');

for (let td of tds) {
	td.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;

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