Integrating jQuery tablesorter, zebra striping and row highlighting

Question

I've tried writing and rewriting this several times, to keep it brief and yet, include "pertinent" background. No luck, so I'm going to give the current situation and answer questions as asked.

I have two issues, so I've put one in this post and the other in a previous post.

I have a dynamic table which is hard-coded down to the tbody tag. The rows inside the tbody are dynamically generated by an AJAX call.

I need to be able to (1) zebra stripe the table;, (2) sort the table; and (3) highlight the row currently hovered over. I can do the zebra stripe with CSS, no problem. And I can accomplish the highlight row functionality (somewhat) with CSS, as well.

But when the table sort is implemented (using jQuery's tablesorter), the rows don't "re-render" the style, so I end up with clumps of light-gray rows and white rows, rather than the zebra striping.

Plus, the row-highlighting only works with the white rows (no CSS class applied) when approached this way.

I thought I'd found some articles that would provide solutions last week, but I can't seem to find them today. And everything that I've found on the web has had some unacceptable glitch in the implementation or the functionality.

Here is the code, as it stands currently:

$("#resultsTbody").html(response);
$("#resultsTbl").tablesorter();
var $rows = $(".stripeMe tbody tr");
$rows.hover(
  function() { $(this).addClass("currRow"); } // <--- error flagged here
  function() { $(this).removeClass("currRow"); }
);

And the error that I'm getting is on the indicated line of code. The error is:

SyntaxError: missing ) after argument list

Answer 1

* I BELIEVE I HAVE SOLVED THIS * I believe I have resolved all of this!

Added the following to my CSS

.odd{ background: #DDDDDD; } 
.even{ background: #FFFFFF; } 

Found that little bit in an obscure bit of documentation on the widget.

Then the rest of my script went like this

$(".stripeMe").tablesorter({ widgets: ['zebra'] });
var $rows = $(".stripeMe tbody tr"); 
$rows.hover( function(){ 
  $(this).addClass("currRow"); 
  $(this).css("cursor","pointer"); }, 
function(){ 
  $(this).removeClass("currRow");
  $(this).css("cursor","auto"); } 
);

Answer 2

I'd just go with tr:nth-child:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}​

no need for JS. Also the hovering:

 tr:hover{ cursor:pointer; background:#EEE}