Zebra striping после jQuery remove()

Question

Я использую jQuery для полосы зебры моей таблицы, потому что она работает для ie8.

$('table.data tr:nth-child(odd)').css('background-color', '#ececec');

Проблема, у меня есть кнопка, которая позволяет удалить строку.

$(this).parents('tr').remove();

Какие скидывает зебры. Так что я пробовал:

$(this).parents('tr').remove(); 
$('table.data tr:nth-child(odd)').css('background-color', '#ececec'); 
$('table.data tr:nth-child(even)').css('background-color', '#ffffff'); 

И

$(this).parents('tr').remove(); 
$('table.data tr').css('background-color', '#ffffff'); 
$('table.data tr:nth-child(odd)').css('background-color', '#ececec'); 

Ни один из которых работают. .remove() не имеет функции обратного вызова, или я бы поместил в него полосу зебры. Есть идеи?

Редактировать - код, указанный выше, работает, но возник конфликт css. (См. Ответ ниже). Однако конфликт не устанавливает цвет фона. Поэтому мне все равно хотелось бы знать, почему правило вызывает конфликт.

Answer 1

.remove не требует обратного вызова, поскольку он является синхронным. Я бы предложил отказаться от .css и использовать класс, чтобы вы могли просто удалить класс, а затем добавить его обратно в нечетные строки.

сделать начальное чередование:

$('table.data tr:nth-child(odd)').addClass('odd'); 

, а затем на REMOVE:

$(this).parents('tr').remove(); 
$('table.data tr').removeClass('odd').filter(':nth-child(odd)').addClass('odd'); 

Answer 2

Если вы ориентируетесь достаточно современный браузер (IE 9+), вы можете использовать CSS3 стилей для обработки все это.

style.css:

table.data tr:nth-child(odd) 
{ 
    background-color: #ececec; 
} 
table.data tr:nth-child(even) 
{ 
    background-color: #ffffff; 
} 

Нет Javascript необходим; эти правила применяются браузером и автоматически применяются при изменении DOM.

Answer 3

Обнаружена проблема.

Код в моем вопросе работает, но возник конфликт css. Как ни странно, хотя, правило CSS, которое было причиной конфликта не установлен background-color

table.headerShadow tr:nth-child(2) { 
    background-image:url(../_images/faux-shadow.png); 
    background-repeat:repeat-x; 
} 

Удаление правила исправляет эту проблему. Странно, а? Почему это правило вызывает конфликт?

Вот скрипку, чтобы продемонстрировать: http://jsfiddle.net/W7yZC/2/