如何使用nth-child选择特定行的单元格

Question

我有一张3x3的桌子。

我想选择特定行中的每个td。 （例如第2行）

$('table > tbody > tr:nth-child(2) > td').css("background-color","red");

上面的代码只将第2行第1列设置为红色。

我预计它会修改第二行中的每个td，但似乎我错过了一些东西。

为什么上面的代码无法按预期工作？

（编辑：我正在使用Chrome 13和jquery 1.7.1）

Answer 1

Chrome似乎是bugged again ^{在Chrome中查看此演示（在Chromium 17中观察到的错误）}。

而不是> td，您可以使用.children()，这相当于：

$('table > tbody > tr:nth-child(2)').children().css("background-color","red");

演示：http://jsfiddle.net/kYZWY/2/

Answer 2

您可以使用在每个主要浏览器中工作的标准DOM属性来简化此操作，当您将其定位到您感兴趣的实际表而不是所有表（这是您当前的选择器所做的那样）时。这将比jQuery等效运行得更快，更可靠。

现场演示：http://jsfiddle.net/N3MAg/

var cells = document.getElementById("your_table_id").rows[1].cells;
for (var i = 0, len = cells.length; i < len; ++i) {
    cells[i].style.backgroundColor = "red";
}

Answer 3

您可以将bg设置为整行like this

$('table > tbody > tr:nth-child(2)').css("background-color","red");

This方法也会给出相同的结果

$('table > tbody > tr:nth-child(2)').children().css("background-color","red");