Единое форматирование выделения ячеек в различных таблицах с помощью jQuery

Question

У меня есть страница, которая содержит несколько таблиц, и я хотел бы отформатировать каждую таблицу так, чтобы вторая ячейка каждой другой строки имела определенный цвет фона.Я пробовал следующий код jQuery, как предложено в ответе на первоначальную версию этого вопроса:

   $('table tr:odd td:nth-child(2)').css("background-color", "#F6F3EE");

Это работает нормально, если во всех таблицах четное количество строк.Если это не так, форматирование инвертируется, как если бы jQuery рассматривал s как часть одной таблицы и не инициировал счетчик в каждой таблице.

Вот ссылка на скрипту js, чтобы проиллюстрировать проблему:

http://jsfiddle.net/davidThomas/eAHUF/

Answer 1

Вы выбираете только первый td элемент, являющийся потомком строки tr.reg:even.

Попробуйте использовать альтернативу :nth-child():

$('table tr:odd td:nth-child(2)').css('background-color','#ffa');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS Fiddle demo .

Примечание : вы должны помнить, что CSS :nth-child() основывается на одном, а не на нуле (как JavaScript).

Отредактировано в ответ на комментарий ОП ниже:

... но это представляет для меня проблему.Я отредактировал вашу демоверсию jsfiddle, добавив строку в первую таблицу, таким образом, получив неравномерное количество строк.Теперь строки второй таблицы подсвечиваются обратно, а это не то, что я искал.У вас есть решение для этого?

Да, я ... пропустил очевидное (как-то).Я исправил приведенный выше код, чтобы просмотреть каждый table по очереди, а затем искать :odd строки и nth-child():

$('table').find('tr:odd td:nth-child(2)').css('background-color','#ffa');​

JS Fiddle demo .

Ссылки:

• find().
• :nth-child().
• :odd селектор .

Answer 2

Самое простое решение - просто:

$("table tr:even td:nth-child(2)").css("background-color", "#F4F4F8");

Вы можете увидеть это в действии здесь: http://jsfiddle.net/rowanmanning/pBCkj/

Answer 3

Попробуйте это:

$('table tr.reg:even td:eq(1)').each(function(index) {
    $(this).css("background-color", "#F4F4F8");
});