JQuery odd/even question with prepend/append

Question

Я успешно использую jquery odd/even selectors для создания «тигровой полосы» на таблице. Затем я добавил возможность добавлять или удалять строки. Тем не менее, я не был , способный правильно работать с полосой, чтобы добавить/удалить строку. Он работает для добавления/добавления, но не для добавления/добавления или удаления. Вот краткое описание кода ...

$(document).ready(function(){ 

    // click on Add Row button 
    $("#addButton").click(function(){ 
     // add a row to table 
     addTableRow('#myTable');       
     // then re-apply tiger striping 
     stripeRows(); 
    }); 
}); 


// remove specified row 
function removeRow(row) { 
    $(row).parent("tr").remove(); 
    stripeRows(); 
} 


function StripeRows() 
{ 
    $("#myTable").each(function(){ 
     $(this).find("tr:even").addClass("evenrow"); 
     $(this).find("tr:odd").addClass("oddrow"); 
    }); 
} 

Answer 1

Вы должны очистить свой предыдущий чередование первый:

function StripeRows() 
{ 
    $("#myTable").each(function(){ 
     $(this).find("tr").removeClass('evenrow oddrow'); 
     $(this).find("tr:even").addClass("evenrow"); 
     $(this).find("tr:odd").addClass("oddrow"); 
    }); 
} 

В противном случае вы будете в конечном итоге с рядами, которые имеют как evenrow и oddrow классы.

Answer 2

Это не работает, возможно, потому, что вы не удаляете старый класс.

У меня есть две части совета:

1. Не используйте :even и :odd. Обычно они не ведут себя так, как вы ожидали. Вместо этого используйте :nth-child(even) и :nth-child(odd) соответственно; и
2. Не имеют как четных, так и нечетных классов. Они вам не нужны. Просто используйте нечетный (или даже) класс и придерживайтесь стиля для таблицы, в которой используется другой случай.

Так что вы должны сделать что-то вроде этого:

function StripeRows() { 
    $("#mytable > tbody > tr").removeClass("oddrow") 
    .filter(":nth-child(odd)").addClass("oddrow"); 
} 

Эта функция удаляет «oddrow» классов из всех строк в таблице, а затем добавляет класс «oddrow» для нечетных строк в таблице ,

Если вы все еще хотите oddrow/evenrow (что имхо просто добавляет дополнительный ненужный код), это не так много изменений:

function StripeRows() { 
    $("#mytable > tbody > tr").removeClass("oddrow evenrow") 
    .filter(":nth-child(odd)").addClass("oddrow") 
    .end().filter(":nth-child(even)").addClass("evenrow"); 
} 

Answer 3

Может быть, вы должны попробовать это в первую очередь?

$(this).find("tr").removeClass();