Kangaroo Court {concept47 blog}

Using the zebra widget with jquery Tablesorter (styling alternate table rows)

December 10th, 2008

I ran into this problem trying to figure out how to make sure that styling alternate rows in a table did not become messed up when tablesorter actually sorted the table.

In googling around I figured out that you had to use the zebra widget call in your initial tablesorter contructor. But no one said exactly how to get the zebra widget to apply the alternate row styling.

The simple answer is to create an “.odd” class for the alternate rows.
As an example

div.data table td { padding: 3px; }
div.data table tr.odd td { background: #e6f2ff;}

and the jquery call is …

 $("table.data").tablesorter({widgets: ['zebra']});

Entry Filed under: javascript