<body>
<table border="1px" width="800px" height="300px" cellspacing="0">
<br><br>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
let tr = document.querySelectorAll("tr");
for (let i = 0; i < tr.length; i++) {
let td = tr[i].querySelectorAll("td");
for (let j = 0; j < td.length; j += 2) {
td[j].style.backgroundColor = "red";
}
}
for (let i = 0; i < tr.length; i++) {
for (let j = 0; j < tr[i].children.length; j++) {
tr[i].children[j].onclick = function () {
for (let i = 0; i < tr.length; i++) {
for (let j = 0; j < tr[i].children.length; j++) {
tr[i].children[j].style.backgroundColor = "white";
}
}
for (let i = 0; i < tr.length; i++) {
tr[i].children[j].style.backgroundColor = "red";
}
}
}
}
</script>
</body>