表格的另一行颜色，即使删除了该行 [英] Alternate table row color even if row is removed

问题描述

即使我删除中间的一行，我也要为备用表行使用不同的颜色.

I want different colors for alternate table rows even when i delete a row in middle.

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

上面的代码更改行颜色，但不更改具有链接的单元格. 请帮助我解决问题

the above code change the row color but not the cell which has link. Please help me to solve the problem

演示

Demo

推荐答案

您还需要更改类

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 仅支持现代浏览器-演示: 小提琴

Use :nth-child if want to support only modern browsers - Demo: 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()

---

Also note: use $(this).closest('tr').remove() instead of $(this).parent().parent().remove()

这篇关于表格的另一行颜色，即使删除了该行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！