假如我点击exercise1 中的set2,我怎么样才可以让set1 和set2同时改变背景颜色?
代码如下:
<!DOCTYPE html>
<html>
<body>
<div>
<!--exercise table here-->
<table border="1">
<thead>
<tr>
<th>Exercise</th>
<th>Sets</th>
<th>Reps</th>
<th>Kg</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" id="ex1">Exercise1</td>
<td class="ex1set">1</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td class="ex1set">2</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td class="ex1set">3</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td rowspan="3" id="ex2">Exercise2</td>
<td class="ex2set">1</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="ex2set">2</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="ex2set">3</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
for (let i = 1; i <= 2; i++) {
$("#ex" + i).click(function () {
$(this).css("backgroundColor", "#99ffbb")
});
$(".ex"+i+"set").each(function (j, n) {
let len = $(".ex"+i+"set").length
$(n).click(function () {
if (j < len - 1) {
$(n).css("backgroundColor", "#99ffbb")
} else if (j >= len - 1) {
$("#ex"+i).css("backgroundColor", "#99ffbb")
}
})
});
}
</script>
</html>