如何更改表格行的背景？答案

【问题标题】：How to change the background of a table row?如何更改表格行的背景？
【发布时间】：2017-06-22 08:36:41
【问题描述】：

我的 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 背景的奇数行的背景颜色。我也希望能够更改该行的背景。

我该怎么做？

谢谢。

【问题讨论】：

将背景颜色添加到 td 而不是 tr 所以，.rowHighlight td {background-color:#AEB6BF;}
谢谢大家 .. 成功了！！！！
更新了边框问题，您可以根据需要进行调整
tr.rowHighlight{} 好一点

标签： jquery html css

【解决方案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>

【讨论】：

如何删除默认出现的边框/空白？我试过<table border="0"> 但它不起作用。我希望整行出现在水平线上，<td> 之间没有任何空格
如何删除默认出现的边框/空白？我试过<table border="0"> 但它不起作用。我希望整行出现在水平线上，<td> 之间没有任何空格@
@Somename 已更新。您可以根据需要调整外边框。另请参阅我在上一课中添加的填充。如果你不想要，你可以删除它
您可以添加“为什么需要 td 吗？”为什么不选择具有更高选择性的选择器？
@vp_arth 但如果它是奇数行，则单击此选择器时不会更改颜色。它保留其背景颜色。

【解决方案2】：

在 jQuery 中，改为这样做

$(".tableclass tr").click(function(){
    $(this).css("background-color","#AEB6BF")
});

【讨论】：

【解决方案3】：

<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>

**If you want to change the row color on hover or on click, you can do this using css.** 

.tableclass tr:hover, .tableclass tr:active, .tableclass tr:visited{
background-color: #CCD1D1;
cursor:pointer;

}

【讨论】：