帶有可選行的交替顏色行表的問題

Question

我在生成的表中有一個問題，該表具有交替的行並且行是可選的。

 $(document).ready(function() { $("tr").click(function() { $(this).toggleClass("highlighted"); }) }); 

 table { width: 100%; border-collapse: collapse; table-layout: auto; vertical-align: top; margin-bottom: 15px; border: 1px solid #999999; } th { font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #F2EDEB; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #522D25 url(images/bg_header.jpg) no-repeat; } tr { background: #fff; color: #261F1D; } tr:hover, tr.alt:hover { color: #261F1D; background-color: #E5C37E; } .highlighted { color: #261F1D; background-color: #E5C37E; } tr.alt { background: #F5FAFA; color: #B4AA9D; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; padding: 6px 6px 6px 12px; } tr:nth-child(odd) { background-color: #ffffff; } tr:nth-child(even) { background-color: #f2f2f2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="fooBar" border="0"> <tr> <th>Text</th> <th>Text</th> <th>Text</th> <th>Text</th> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> </table> 

我的問題是：如果我放置交替色，則選擇行表功能將不起作用，如果將其刪除，它將再次起作用。 有任何想法嗎？

我需要動態創建一個表，其中包含可選擇的交替行。 我希望能夠使用一些非常基礎的東西，不需要datatables庫的所有功能。

Answer 1

您只需要稍微重新組織規則。 在您的原始演示中，偽選擇器tr:nth-child(odd)或tr:nth-child(even)具有比.highlighted高的特異性。 所有你需要做的就是添加相同的tr選擇到.highlighted它變得tr.highlighted ，並將其移動下面的偽選擇，如得到應用同等特異性選擇最后加載規則。

tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr.highlighted {
  color: #261F1D;
  background-color: #E5C37E;
}
tr:hover {
  color: #261F1D;
  background-color: #E5C37E;
}

請參閱下面的更新的演示。

 $(document).ready(function() { $("tr").click(function() { $(this).toggleClass("highlighted"); }) }); 

 table { width: 100%; border-collapse: collapse; table-layout: auto; vertical-align: top; margin-bottom: 15px; border: 1px solid #999999; } tr { background: #fff; color: #261F1D; } th { font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #F2EDEB; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #522D25 url(images/bg_header.jpg) no-repeat; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; padding: 6px 6px 6px 12px; } tr:nth-child(odd) { background-color: #ffffff; } tr:nth-child(even) { background-color: #f2f2f2; } tr.highlighted { color: #261F1D; background-color: #E5C37E; } tr:hover { color: #261F1D; background-color: #E5C37E; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="fooBar" border="0"> <tr> <th>Text</th> <th>Text</th> <th>Text</th> <th>Text</th> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> <tr class=""> <td>Text</td> <td>image</td> <td>Text</td> <td>image</td> </tr> </table> 

Answer 2

您可以在懸停和突出顯示的樣式上使用!important ，以便這些樣式將覆蓋默認樣式。

這是小提琴： https : //jsfiddle.net/1x1farow/