highlighting table rows after removing table row

Question

I am trying to highlight all even rows in a table after deleting a row. The tr is removed but the re-highlighting does not work (I get two rows together that are highlighted). Here's my code;

$( "#tr_id" ).remove();

// re-highlight table rows 
$("#table_id" ).removeClass("highlight");
$("#table_id tbody tr:even" ).addClass("highlight");

However, if I add an alert or something to slow the execution between removing and highlighting it works.

$( "#tr_id" ).remove();

alert( 'slow execution' );

// re-highlight table rows 
$("#table_id" ).removeClass("highlight");
$("#table_id tbody tr:even" ).addClass("highlight");

Any ideas?

Answer 1

我认为使用JQuery的delay函数非常适合您的情况。

Answer 2

If you don't mind not supporting IE < 9 and CSS3 is an option, you could use the nth-child pseudo-class and avoid the issue altogether:

#table_id tbody tr:nth-child(even) { background-color: yellow; }

Removing tr s doesn't effect the application of the pseudo class: http://jsfiddle.net/axWYj/