Question

我使用以下代码在一页上斑马剥离几张表：

    $(".events-table tr:even").css("background-color", "#fff");
$(".events-table tr:odd").css("background-color", "#efefef");

这很好用，但偶数/奇数间隔应用于页面上的每个表。我希望每个表都有相同的模式。意思是，对于页面上的每个表，每个表应该在第一行上以相同的颜色开始，然后在第二行上相同。

有什么建议吗？

THX！

Answer 1

您可以使用表格的选择器，然后找到要着色的行，即：

$(".events-table").each(function()
{
    $(this).find("tr:even").css("background-color", "#fff");
    $(this).find("tr:odd").css("background-color", "#efefef");
});

Answer 2

使用:nth-child()（:nth-child(odd)和:nth-child(even)）而不是:odd或:even

$("table.events-table tr:nth-child(even)").css("background-color", "#fff");
$("table.events-table tr:nth-child(odd)").css("background-color", "#efefef");

:odd和:even实际上是0基础，意味着奇数行是0,2,4等，反之亦然，用于在完全包装中得到奇数和偶数匹配集。

请参阅 this Working Demo 进行演示。

nth-child()在父元素的基础上执行选择。

Answer 3

问题是.events-table tr选择器返回tr的列表，而与它们是否属于同一个表无关。 :even和:odd选择器将应用于完整列表。

如果你没有令人难以置信的大量表，你可以使用id而不是类。

$("#events-table1 tr:even").css("background-color", "#fff");
$("#events-table1 tr:odd").css("background-color", "#efefef");
$("#events-table2 tr:even").css("background-color", "#fff");
$("#events-table2 tr:odd").css("background-color", "#efefef");

Answer 4

：odd和：even选择器是特定于jQuery的“扩展”。正如bluenote所提到的，它们似乎在目标类型的所有元素列表中运行（在您的情况下，tr中的所有.events-table。

替代方案包括：

通过将table元素作为第二个参数传递来将选择器约束到表上下文$('tr:odd', mytable).css({})
使用“真正的”css nth-child选择器$('.events-table tr:nth-child(even)').css()，但要注意跨浏览器兼容性问题。
将“奇数”或“偶数”类分配给相应的行并明确定位。

Answer 5

$("tr:odd").css("background-color", "#bbbbff");

将改变页面上所有表格的奇数行，你可以将另一个表格改为偶数

Answer 6

尝试向表中添加ID并一次更新一个表。

jQuery奇数/偶数多元素选择器

6 个答案: