The zebra code you have seems to be based on another library (Prototype ?), so it wont run using without it. Anyway, there's a zebra plugin included by default in the tablesorter. just do:
$("table").tablesorter({ widgets: ['zebra','repeatHeaders'] }); Olivier On Tue, Dec 9, 2008 at 9:01 PM, David Blomstrom <[EMAIL PROTECTED]>wrote: > 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> > >