jquery - 如何更改表格行的背景？

Question

我的 HTML 代码:

<table class="tableclass">
<th>id</th><th>Name</th><th>Value</th>
<tr>
    <td>001</td>
    <td>Name 001</td>
    <td>This is some value for Key 001</td>
</tr>

<tr>
    <td>002</td>
    <td>Name 002</td>
    <td>This is some value for Key 002</td>
</tr>

<tr>
    <td>003</td>
    <td>Name 003</td>
    <td>This is some value for Key 003</td>
</tr>

<tr>
    <td>004</td>
    <td>Name 004</td>
    <td>This is some value for Key 004</td>
</tr>

</table>

我能够使用 CSS 显示替代颜色:

tr:nth-child(even) {
    background-color: #CCD1D1;
}

我的 jQuery 突出显示单击的表行:

$(".tableclass tr").click(function(){
    $(this).addClass("rowHighlight");
});

类.rowHighlight{background-color:#AEB6BF;}

使用此代码，我无法更改具有 css 背景的奇数行的背景颜色。我也希望能够更改该行的背景。

我该怎么做？

谢谢。

Answer 1

只需使用 .rowHighlight td{background-color:your color;

$(".tableclass tr").click(function(){
    $(this).addClass("rowHighlight");
});

table {
border:0px solid #CCC;
border-collapse:collapse;
}
td {
    border:none;
}
tr:nth-child(even) {
    background-color: #CCD1D1;
}




.rowHighlight td{background-color:red; padding:0px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="tableclass">
<th>id</th><th>Name</th><th>Value</th>
<tr>
    <td>001</td>
    <td>Name 001</td>
    <td>This is some value for Key 001</td>
</tr>

<tr>
    <td>002</td>
    <td>Name 002</td>
    <td>This is some value for Key 002</td>
</tr>

<tr>
    <td>003</td>
    <td>Name 003</td>
    <td>This is some value for Key 003</td>
</tr>

<tr>
    <td>004</td>
    <td>Name 004</td>
    <td>This is some value for Key 004</td>
</tr>

</table>