Zebra striping effect for tables in JQuery

See code here

Hi I'm very new to using JQuery and only know a few basics and I'm having trouble figuring out how to keep stripes in the right place when a table is sorted. They seem to be fine at first, but anything else in the header clicked on and the table colors go berzerk.

Now, I've come across a few answers to the question, but my problem is that I have very little knowledge of knowing where the piece of code is needed to be placed. So I don't know what code is the closest to being correct because the only responses from the site I'm testing seem to be that either I can click on the header, but the table still sorts the colors out of order (so its like the code didn't do anything) or the header doesn't respond at all.

The code uses the jQuery JavaScript Library v1.4.2 and it also uses the tablesorter 2.0 plugin by Christian Bach. What I think I have to do is manually add some sort of widget that will reset the stripes to where they were the first time, or keep the stripes from changing after load.

What I've been doing to add the code in is by making a new script like:

for some reason if I add a < before the 'script' some of the code disappears

<script type="text/javascript" id="js">
  $(document).ready(function() {
  { 
    $("#myTable").tablesorter({ 
      widgets: ['zebra'] 
    }); 
  }); 
</script>

I've tried putting it in the /head with the other scripts, but it's still really h开发者_StackOverfloward to tell what is right if the test site only gives a few of the same responses every time. (I'm using firebug to test) Is there something specific that I forgot about? I don't exactly know if this code is properly referencing back to jQuery, but I could really use anyone's input.

---

The zebra widget, by default, adds class names of "odd" and "even" for styling. So just change the widgetZebra option to match your css styling:

$("table").tablesorter({
    // sort on the first column and third column, order asc
    sortList: [[0,0],[0,1]], widgets: ['zebra'], widgetZebra: {css: ["alt",""]}
});

---

While it will be difficult at first to change the way you're outputting the data (because it sounds that you are currently manually outputting the data in an HTML table, then using Javascript to sort the table dynamically), but in the long run using a different jQuery plugin altogether, JQGrid.

From a cursory glance, it looks as if it has a "plugin" of its own that takes a pre-existing table and converts it to a jqgrid, but I've only ever used Jqgrid to make grids from the ground up.

If you're not sure, take a look at their demo to see it in action. I think once you see the power that jqgrid provides, you'll consider letting it do the heavy lifting for you.