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>
>
>

Reply via email to