Yuck
If you want to use Tablesorter, why not use the way it's supposed to
be used?
one simple setting of the "widgets" in the ".tablesorter" call would
wire up all alternate rows with the class "odd" (and it's done!)
On Dec 9, 3: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>
