Как Сделайте кнопку, по нажатию на которую в красный фон покрасится та ячейка, номер которой совпадает с номером из переменных.
Дана следующая 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;
Сделайте кнопку, по нажатию на которую в красный фон покрасится та ячейка, номер которой совпадает с номером из переменных.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>focusout</title>
</head>
<body>
<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>
<button>кнопка</button>
<script>
let col = 2;
let row = 3;
let button = document.querySelector('button');
button.addEventListener('click', function(){
let rowTds = document.querySelectorAll('#table td[data-row = "' + row + '"]');
for(let rowTd of rowTds){
if( rowTd.dataset.col == col){
rowTd.classList.add('color');
};
};
});
</script>
</body>
</html>