<style>
table {
border-collapse: collapse;
width: 1200px;
height: 500px;
}
table td {
border: 2px solid;
}
</style>
</head>
<body>
<table class="tb1">
<tbody>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
let tds = document.querySelectorAll(".tb1 td");
let trs = document.querySelectorAll(".tb1 tr");
for (let i = 0; i < tds.length; i++) {
tds[i].onclick = function () {
for (let j = 0; j < trs.length; j++) {
trs[j].style.background = "";
}
// 排他
tds[i].parentElement.style.background = "red";
};
}
</script>