<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>up and down</title>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
height: 40px;
width: 40px;
border: 1px solid rgba(0, 0, 128, 1);
text-align: center;
}
td:after{
content: attr(data-row)attr(data-col);
}
.active{
background-color: rgba(255, 0, 255, 1);
}
</style>
</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>
const length = document.querySelectorAll('tr:first-child > td').length;
const tds = document.querySelectorAll('td');
let [col,row]=[2,3];
const i = --row * length + --col;
const {style} = tds[i];
document.querySelector('button').addEventListener('click', function(){
style.background = 'red'
});
</script>
</body>
</html>