表格的另一行顏色，即使行已刪除

Question

即使我刪除中間的一行，我也要為備用表行使用不同的顏色。

的HTML

<table border="1">
  <tr><td>Row 1</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 2</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 3</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 4</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 5</td><td><a class="sam" href="#">Delete</a></td></tr>
</table> 

jQuery的

$(function(){
    update_rows();
    $("a").click(function(){$(this).parent().parent().remove();update_rows();});
});
function update_rows()
{
    $("tr:even").css("background-color", "#aaa");
    $("tr:odd").css("background-color", "#eee");
}

的CSS

.sam
{
background-color:#FF00FF;
}
.sams
{
background-color:#0000FF;
}

上面的代碼更改行顏色，但不更改具有鏈接的單元格。 請幫我解決問題

演示版

Answer 1

嘗試：

  <style>
     tr:nth-of-type(even) {
        background-color:#e3e3e3;
     }

     td:nth-of-type(odd) {
        color:#d04242;
     }
  </style>

Answer 2

您還需要更改班級

function update_rows() {
    $("tr:even").css("background-color", "#aaa").find('a').removeClass('sam').addClass('sams');
    $("tr:odd").css("background-color", "#eee").find('a').removeClass('sams').addClass('sam');
}

演示： 小提琴

---

如果只想支持現代瀏覽器，請使用：nth- child-演示： Fiddle

tr:nth-child(odd) a {
    background-color:#FF00FF;
}
tr:nth-child(even) a {
    background-color:#0000FF;
}
tr:nth-child(odd) {
    background-color:#aaa;
}
tr:nth-child(even) {
    background-color:#eee;
}

然后

$(function () {
    $("a").click(function () {
        $(this).closest('tr').remove();
    });
});

---

另請注意：使用$(this).closest('tr').remove()代替$(this).parent().parent().remove()

Answer 3

使用CSS3作為樣式：

<table id="whatever">
  <tr><td>Row 1</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 2</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 3</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 4</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 5</td><td><a href="#">Delete</a></td></tr>
</table>
<style>
#whatever tr {
    background-color: #AAA;
}
#whatever tr a {
    background-color:#F0F;
}
#whatever tr:nth-child(odd) {
    background-color: #EEE;
}
#whatever tr:nth-child(odd) a {
    background-color:#00F;
}
</style>
<script>
$("#whatever a").click(function(){
    $(this).closest("tr").remove();
});
</script>

現在，無需手動更新，不需要鏈接類或行背景。 請參閱更新的演示 。

Answer 4

與您的tr完美搭配。 鏈接顏色確實發生了變化，因為您沒有使用jQuery定位它

Answer 5

我已經更新了小提琴您需要更新班級sam和sams

      $("tr:even td a").removeClass("sam").removeClass("sams").addClass("sam");
      $("tr:odd td a").removeClass("sam").removeClass("sams").addClass("sams");

檢查小提琴