Having trouble getting zebra rows and tablesorter to work together

By zebra rows, I am talking about the table design where the background color of rows alternate in color. By table sorter, I am talking about the Jquery plugin that makes table headers clickable. When clicked, the table is sorted by that particular table header. Here is the website for it: http://tablesorter.com/docs/

My problem: When a user sorts the table by clicking on a table header, the zebra rows do not work anymore.

Here is my code when a user clicks on a table header:

  $("th").click(function() {
    $("table").tr开发者_如何转开发igger("update");
    enableRowHover();
    $("table").tablesorter();
    enableZebraRows('tbody tr:odd td', 'alt');
  });

Here is my code that enables the zebra rows:

function enableZebraRows(selector, className) {
  $("tr").removeClass("alt");
  $(selector).removeClass(className).addClass(className);
}

The function that enables zebra rows works well because on document ready, I use it, and it works.

I assume that your zebra rows aren't correct after you sort.

You could just call enableZebraRows after you have sorted the table:

$("table").bind("sortEnd",function() {
    enableZebraRows(tbody tr:odd td', 'alt');
});