テーブル行の背景を変更するには？

Question

私のHTMLコード：クリックされたテーブル行強調するために

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

そして、私のjQueryの：私はCSSで別の色を表示することができるよ

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

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

クラスを.rowHighlight{background-color:#AEB6BF;}

このコードでは、私はできませんoバックグラウンドを持つ奇数行の背景色をcssから変更します。私はその行の背景も変更できるようにしたい。

どうすればよいですか？

ありがとうございました。

Answer 1

.rowHighlight td {background-color：your color; jQueryので

$(".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>