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

Okay, I found the problem with the error in this code - after straining my not-so-young eyes. There needs to be a comma at the end of the indicated row. Fixed that. As for the striping/highlighting/sorting not working nice, I'm still lost. — CoMo G-Dawg, Sep 17 '12 at 16:00
If you solve your own questions, please add your own answer using the form below and then mark is as the selected answer. — Dai, Sep 17 '12 at 17:49

score 2 · Answer 1 · answered Sep 17 '12 at 17:49

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}

answered Sep 17 '12 at 17:49

moonwave99

21,957
3
43
64

Thanks for the feedback. I tried those. The CSS like that worked until the table got sorted, then it went all wonky on me. The rows carried the classes with them. And, as noted, the CSS to get the row to change only worked on rows without another class already assigned - or only half of the rows. – CoMo G-Dawg Sep 17 '12 at 18:19
1

[It works even on sorting](http://jsfiddle.net/AmSdb/) - get rid of all `.odd` and `.even` classes. – moonwave99 Sep 17 '12 at 18:33
1

CSS is a better answer. To remove the odd and even class names, clear the class names in this option: `widgetZebra:{css:["",""]}` – Mottie Sep 20 '12 at 02:53

score 2 · Accepted Answer · answered Sep 19 '12 at 11:55

* 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"); } 
);

Integrating jQuery tablesorter, zebra striping and row highlighting

2 Answers2