當其中一個元素包含某個類時，我需要突出顯示表格中的整行。例子：
.whole-row-red-background {
background-color: red;
}<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class='whole-row-red-background'></td>
<td></td>
<td></td>
</tr>
</tbody </table>在上面的例子中，只有表格中第二行的第一個單元格（第一個 td）設定為紅色背景。在這種情況下（<td>行中的第一個具有此類）我需要行中的所有 <td>元素都具有紅色背景。
uj5u.com熱心網友回復：
您可以使用通用的兄弟選擇器。更多資訊：https ://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
這是您更新的代碼段：
.whole-row-red-background {
background-color: red;
}
.whole-row-red-background ~ td {
background-color: red;
}<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class='whole-row-red-background'></td>
<td></td>
<td></td>
</tr>
</tbody </table>uj5u.com熱心網友回復：
let td = document.getElementsByClassName("whole-row-red-background")[0]
let tr = td.closest("tr")
tr.style.backgroundColor='red'.whole-row-red-background {
background-color: red;
}<table>
<tbody>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td class='whole-row-red-background'>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody> </table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446187.html