如何更改表格行的背景？

我的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;}

With this code Im not able t o更改背景爲css的奇數行的背景顏色。我希望能夠更改該行的背景。

我該怎麼做？

謝謝。

來源

2017-02-05 Somename

添加背景色爲TD而不是TR所以，.rowHighlight TD {背景顏色：＃AEB6BF ;} –

謝謝堆..它的工作！ – Somename

更新了邊框問題，你可以根據你的需要調整它 –

只需使用.rowHighlight td {background-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>

來源

2017-02-05 09:11:54

如何刪除默認出現的邊框/空白區域？我試過'

'但它不工作。我希望整行在水平線上出現，而'' – Somename

之間沒有任何空格，如何刪除默認顯示的邊框/空白區域？我試過'

'但它不工作。我希望整行出現在水平線中，而'' – Somename

@Somename之間沒有任何空格。您可以根據需要調整外邊框。另請參見我在最後一堂課中添加的填充。你可以刪除它，如果你不想要 –

在jQuery的，做到這一點，而不是

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

來源

2017-02-05 09:17:18

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

}

來源

2017-02-05 09:19:51

相關問題

如何更改表格行的背景？

回答

相關問題