Changing background color of table rows based on click event with jquery

Question

When the document is ready to be manipulated, jquery adds a class to every even row, and another to every odd row, in order to visually see the different rows. But whenever I update (sort based on header) the rows, they don't update no matter what i try.

    <script type="text/javascript">
    $(document).ready( function( ) {
 $('table tr:even').addClass('evenRow');
 $('table tr:odd').addClass('oddRow');
 $("th").click( function( event ) {
     $('table tr').removeClass('evenRow oddRow');
  $('table tr:even').addClass('evenRow');
  $('table tr:odd').addClass('oddRow');
 });
    } ); 
    </script>

Answer 1

It seems that your click event code is running before the table sort takes place. How are you sorting the rows? If you are using a plug-in, check if the plug-in supports row striping inherently (for example, the tableSorter plug-in has this built-in). If not, perhaps the plug-in offers a "post sort" setting to which you can pass a function with your jquery code.