Как выбрать ячейки определенной строки, используя nth-child

Question

У меня есть стол 3х3.

Я хочу выбрать каждый тд в определенной строке. (2-й ряд, например)

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

Выше кода устанавливает только 2-й ряд 1-го столбца на красный.

Я ожидал, что он изменит каждый тд во 2-м ряду, но, похоже, я что-то упустил.

Почему приведенный выше код не работает должным образом?

( РЕДАКТИРОВАТЬ : я использую Chrome 13 с jquery 1.7.1)

Answer 1

Chrome, похоже, снова прослушивается ^{Просмотреть эту демонстрацию в 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 на весь ряд вот так

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

Этот подход также дает идентичный результат

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