Question

在doc.ready上，我已经完成了$("tr:even").css("background-color","orange");。然后我有一个按钮执行以下操作：$("#tr3).remove()删除第3个tr（我发现第三个tr“tr3”）。然后我将橙色bgcolor应用到偶数行，以便更新tr bgcolors，因为表格少了1个tr，但tr bgcolor不刷新。我最终得到了2个橙色tr，而不是每个其他tr都是橙色背景。有意义吗？

Answer 1

如果将背景颜色设为css类会更容易：

.odd { background-color: orange; }

然后在javascript：

$(function() {
  $("tr:even").addClass("odd");
  $("#button").click(function() {
    $("#tr3").remove();
    $("tr").removeClass("odd").filter(":nth-child(odd)").addClass("odd");
  });
});

Answer 2

尝试也应用于奇怪的一个：

$("tr:odd").css("background-color","your color");
$("tr:even").css("background-color","orange");

因为我认为这是因为当你删除第3个tr时，它旁边的所有tr都会发生变化。奇数变为偶数，偶数变为奇数。

Answer 3

您可以使用它来访问第n个元素：

$("tr:nth-child(3n)") //will match with 3rd, 6th, ...

您可以更改3n或对其进行简单的添加和减法：

$("tr:nth-child(3n+1)") //will match with 1st, 4th, 7th, ...
$("tr:nth-child(3n+2)") //will match with 2nd, 5th, 8th, ...

:nth也可用于过滤器，例如：

$(SELECTOR).filter(":nth-child(3n)")

我希望这就是你要找的。

更新：

重新阅读你的问题之后，我发现错了。

在我的代码中，我将代码放在单独的函数中：

function zebra_table($) {
  $("tr").removeClass("odd");
  $("tr:odd").addClass("odd");
}

然后在我更改表的行后，例如删除其中一行，或添加新行，我只需调用上面的函数：

jQuery(function($){
  //after DOM loaded, apply zebra
  zebra_table($);

  //...
  //after modify table
  zebra_table($);
});

关键是，再次使表格“普通”，然后在当前表结构中重新应用斑马规则。

Answer 4

所有，非常感谢你的帮助！我最终做了以下事情：

$(document).ready(function() {
    $("tr:odd").addClass("odd");
    $("#button").click(function () {
        $("#tr3").remove();
        $("tr").removeClass("odd");
        $("tr:odd").addClass("odd"); // re-add class to odd tr's
    });
});

这很有效！不需要做任何过滤器（n）的东西。再次感谢您的帮助!!!

如何删除tr然后将背景颜色应用于奇数tr？

4 个答案: