[SOLVED] jQuery Tablesorter - Multiple tables with Zebra widget

jQuery Tablesorter - Multiple tables with Zebra widget - different add colors per table

I'm using jQuery Tablesorter with Zebra widget on multiple tables. What i'm trying to do is make each table has different color for add th. Currently using blue_style.css which make every add rows in blue.

one with just like that - in blue, second one in yellow, third one in pink forth one in green.. something like this.

I tried using ID code, but didn't really work..

each table starts like this

. . .

<script id="js">$(function() {

    $(".tablesorter")
        .tablesorter({
            // this is the default setting
            cssChildRow: "expand-child",

            // initialize zebra and filter widgets
            widgets: ["zebra", "filter"],

            widgetOptions: {
                // include child row content while filtering, if true
                filter_childRows  : true,
                // class name applied to filter row and each input
                filter_cssFilter  : 'tablesorter-filter',
                // search from beginning
                filter_startsWith : false
            }

        });

    // hide child rows
    $('.expand-child td').show();

    // Toggle child row content (td), not hiding the row since we are using rowspan
    // Using delegate because the pager plugin rebuilds the table after each page change
    // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
    $('.tablesorter').delegate('.toggle', 'click' ,function(){

        // use "nextUntil" to toggle multiple child rows
        // toggle table cells instead of the row
        $(this).closest('tr').nextUntil('tr:not(.expand-child)').find('td').toggle();

        return false;
    });

    // Toggle widgetFilterChildRows option
    $('button.toggle-option').click(function(){
        var c = $('.tablesorter')[0].config.widgetOptions,
        o = !c.filter_childRows;
        c.filter_childRows = o;
        $('.state').html(o.toString());
        // update filter
        $('input.tablesorter-filter').trigger('search');
    });

});</script>
</head>
<body>
   <table class="tablesorter">
    <colgroup>
        <col width="135" />
        <col width="60" />
        <col width="150" />
        <col width="210" />
        <col width="20" />
    </colgroup>
    <thead>
        <tr>
            <th>HORSE</th>
            <th>YEAR FOALED</th>
            <th>RIDER</th>
            <th>OWNER</th>
            <th>TOTAL</th>
        </tr>
    </thead>
    <tbody>

. . .

I've been changed some on Zebra in order to show child rows always expanded.

And on style.css

/* Zebra Widget - row alternating colors */
table.tablesorter tr.odd td {
    background-color: #f0f0ff;
}
table.tablesorter tr.even td {
    background-color: #fff;
}

which make every odd's background color is blue (#f0f0ff)

This is how I tried (which didn't work)

second table:

<body>
 <div id="5year">
       <table class="tablesorter">
        <colgroup>

. . third table:

<body>
 <div id="6year">
       <table class="tablesorter">
        <colgroup>

. . and then add this on css.

/* Zebra Widget - row alternating colors */
    table.tablesorter tr.odd td {
        background-color: #f0f0ff;
    }
    #5year table.tablesorter tr.odd td {
        background-color: #eef2dd;
    }
    #6year table.tablesorter tr.odd td {
        background-color: #eed9de;
    }
    #78year table.tablesorter tr.odd td {
        background-color: #b8e4de;
    }   
    table.tablesorter tr.even td {
        background-color: #fff;
    }

I've wrapped the table with since I can not really change the class name (.tablesorter)- if I do, tablesorter functions all break and not work. but all tables just same as regular one all in blue... :(

Here is image url that you can see that I had photoshop to easy to explain.

http://tournaments.angelstone.co/yhs/images/zebra_example.jpg

Btw, I'm using them all in one page. one table per page, but have to use one style.css file to share to every pages since I'm using them on Wordpress page which I can not indicate specific css file per table.

Anyone has any idea how to solve this problem? I'll be really really appreciated. (sorry for my bad English..not my mother tongue) Thanks and regards. Vic

Solution

All you really need to do is change the widgetOptions.zebra class name settings, like this (demo):

Javascript

$('#5year').tablesorter({
    widgets: ['zebra']
});

$('#6year').tablesorter({
    widgets: ['zebra'],
    widgetOptions: {
        zebra: ["even", "odd6"] // odd rows have a different class name
    }
});

$('#7year').tablesorter({
    widgets: ['zebra'],
    widgetOptions: {
        zebra: ["even", "odd7"] // odd rows have a different class name
    }
});

CSS

table.tablesorter tr.odd6 td {
    background-color: #fcfef0;
}
table.tablesorter tr.odd7 td {
    background-color: #fcf1ef;
}