[jQuery] TableSorter vs Zebra Stripes

[David Blomstrom]

I want to create a table that features sortable columns and alternate row
colors. I found scripts that do one or the other, but when I implement both,
the row color function is impaired.

First, I downloaded the JQuery TableSorter plugin; hence the links to
jquery-1.2.6.min.js and jquery.tablesorter.js below. Below that is the
JavaScript for the "Zebra Stripes" function. When used together, the table
exhibits no row colors except when I mouseover a row.

Does anyone know how I can fix this?

Thanks.

* * * * *

<script src="/1A/JS/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="/1A/JS/tablesorter/jquery.tablesorter.js"
type="text/javascript"></script>


<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function()
  {
  $("#myTable").tablesorter();
  }
 );
 </script>

<script type="text/javascript">
var Event = {
 add: function(obj,type,fn) {
  if (obj.attachEvent) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function() { obj['e'+type+fn](window.event); }
  obj.attachEvent('on'+type,obj[type+fn]);
  } else
  obj.addEventListener(type,fn,false);
 },
 remove: function(obj,type,fn) {
  if (obj.detachEvent) {
  obj.detachEvent('on'+type,obj[type+fn]);
  obj[type+fn] = null;
  } else
  obj.removeEventListener(type,fn,false);
 }
}

function $() {
 var elements = new Array();
 for (var i=0;i<arguments.length;i++) {
  var element = arguments[i];
  if (typeof element == 'string') element =
document.getElementById(element);
  if (arguments.length == 1) return element;
  elements.push(element);
 }
 return elements;
}

String.prototype.trim = function() {
 return this.replace(/^\s+|\s+$/,"");
}

function addClassName(el,className) {
 removeClassName(el,className);
 el.className = (el.className + " " + className).trim();
}

function removeClassName(el,className) {
 el.className = el.className.replace(className,"").trim();
}

var ZebraTable = {
 bgcolor: '',
 classname: '',
 stripe: function(el) {
  if (!$(el)) return;
  var rows = $(el).getElementsByTagName('tr');
  for (var i=1,len=rows.length;i<len;i++) {
  if (i % 2 == 0) rows[i].className = 'alt';
  Event.add(rows[i],'mouseover',function() { ZebraTable.mouseover(this); });
  Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this); });
  }
 },
 mouseover: function(row) {
  this.bgcolor = row.style.backgroundColor;
  this.classname = row.className;
  addClassName(row,'over');
 },
 mouseout: function(row) {
  removeClassName(row,'over');
  addClassName(row,this.classname);
  row.style.backgroundColor = this.bgcolor;
 }
}

window.onload = function() {
 ZebraTable.stripe('myTable');
}

</script>