即使删除了行，也会替换表格行颜色

我想要替换表行的不同颜色，即使我在中间删除一行。

HTML

 
Row 1
Delete
 
Row 2
Delete
 
Row 3
Delete
 
Row 4
Delete
 
Row 5
Delete
  

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

您还需要更改课程

 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如果只想支持现代浏览器 – 演示： 小提琴

 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 2

尝试：

Answer 3

使用CSS3进行样式设计：

 
 
Row 1
Delete
 
Row 2
Delete
 
Row 3
Delete
 
Row 4
Delete
 
Row 5
Delete
 
   

现在不需要手动更新，也不需要链接类和行背景。 查看更新的演示 。

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

检查小提琴