Question

我正在编写一个带有一些jQuery样式的html页面。所以我有以下内容：

$("table tr:odd td").css({"background-color":"rgb(233,247,255)"});

这使得其他所有行都变蓝。但就在这时，我把一个表放在中的一个单元格中。发生了什么？好吧，它将内部表的行视为外表中的一行，并且着色变得混乱（两个连续的蓝色行，而内部表中的行保持白色）。

那么，如何在这样的选择器中排除子表呢？任何人吗？

编辑：

感谢您的想法和答案。我想出了这段代码，因为我真正想要的是让所有表具有偶数/奇数着色（不仅仅是顶级表）：

$("table").each(function()
{   $(this).children().children(":odd").css({"background-color":"rgb(240,255,250)"});
     $(this).children().children(":even").css({"background-color":"rgb(233,247,255)"});
});

问题是这似乎只是第一行的颜色 - 我不知道为什么。有谁知道为什么？

解决方案：我明白了。问题是浏览器做实际上插入了一个tbody标签，你必须把它弄清楚。下面是我正在使用的最终结果：

$("table").each(function()
{   $(this).children().children(":odd").children().css({"background-color":"green"});
     $(this).children().children(":even").children().css({"background-color":"blue"});
});

Answer 1

您可以使用孩子selector >。他们浏览器应该插入一个tbody元素：

$("#myTable > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Answer 2

Russ Cam鼓励我在不使用桌子上的标识符的情况下再次回答这个问题，这就是我想出的：

$("table:not(td > table) > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

在这里，我选择每个奇数行中的所有td，而不是<td>的子项。 Working demo here.

Answer 3

最简单的方法是为外部表提供标识符，例如CSS class或id。然后它是微不足道的。顺便说一下，我认为选择器:odd应该是:nth-child(odd)

$("table.highlight > tr:nth-child(odd) > td")
    .css({"background-color":"rgb(233,247,255)"});

这里我们在外表上使用CSS类highlight，因此奇数行中的内表单元格不会应用样式。

修改

如果没有某种标识符，事情就会变得有点棘手，但这可以起作用（虽然我确信有更简洁的方法可以做到这一点）

$("table") .filter(function() { return this.parentNode.nodeName.toLowerCase() !== "td" }) .children('tbody').children('tr:nth-child(odd)').children('td') .css({"background-color":"rgb(233,247,255)"});
不能使用
find()代替children()，因为内部表的奇数行也会匹配并在包装集中返回。

这是 Working Demo

修改

在回答您编辑的问题时，为每个表条带化奇数行或偶数行非常简单

$('table tbody').children('tr:nth-child(odd)').css({"background-color":"green"})

我建议使用:nth-child(odd|even)而不是:odd|even，因为前者是基于一的索引，因此选择奇数行（1,3,5等）;后者是从零开始的，这意味着偶数行（2,4,6等）将是“奇数行”。在我看来，并没有完全与选择器的语义名称对齐。另外，我建议使用CSS样式来实现内联样式，并使用addClass()将CSS类应用于<tr>。使用CSS类可以轻松修改样式以在不同页面上应用和重用它们。如下所示，

tr.odd > td { background-color: green; } tr.even > td { background-color: red; }

要将斑马条纹应用于桌子，我认为你有两个真正的选择

将一种背景颜色应用于表格中的所有<tr>元素，然后只需将CSS类添加到奇数/偶数行，即可添加要条纹化的其他背景颜色。
< / LI>

使用jQuery应用两个CSS类。

这是第二个选项的一些代码

$('table tbody') // find <tbody> that are descendents of <table> .children('tr:nth-child(odd)') // find odd <tr> .addClass('odd') // add odd class .end() // jump back to previous wrapped set .children('tr:nth-child(even)')// find even <tr> .addClass('even'); // add even class

Working Demo 。将 / edit 添加到网址以查看代码。

Answer 4

父表的父元素是什么？尝试使用后代选择器。例如如果您的父表直接位于正文下方：

$("body > table >  tr:odd > td").css({"background-color":"rgb(233,247,255)"});

或者如果您在标记中指定了tbody：

$("body > table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Answer 5

Greg的例子：

$("table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

无效，因为它会选择页面上的所有表格。最佳解决方案是向表中添加ID并将代码更改为：

$("#the-table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

如何在jQuery中只选择元素的直接子元素

5 个答案: