javascript888,
<!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;
}
.active{
background-color: rgba(255, 0, 255, 1);
}
</style>
</head>
<body>
<table id='table'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<script>
let length = document.querySelectorAll('tr:first-child > td').length;
let tds = document.querySelectorAll('td');
let lockdown = [];
let current;
for (let i = 0; i < tds.length; i++){
let td = tds[i];
let arr = [i - length, i + length] ;
td.addEventListener('click',function func () {
if(current == td || lockdown.includes(i)) return;
if(current) current.classList.remove('active')
td.classList.add('active');
lockdown = arr;
current = td;
})};
</script>
</body>
</html>