Set alternating row class with rowspans and jquery

Question

If I have a html table with <tr>'s, but with those tr's there are <td>'s with rowspans, I need to figure out the quickest way to set the alternating row class for coloring with jQuery. Does anyone know of a plugin that does this?

Answer 1

You can use something like this. The row span is going to take from the first row it's from.

$('table tr:odd').addClass('odd');
$('table tr:even').addClass('even');

Then in your css

table tr.odd td {
  background-color: #EEE;
}

Answer 2

this is ripped from Nick Craver's post,

$("table.altRow").each(function() {
    var $this = $(this);
    var numTD = $this.find("tr:has(td[rowspan]):first td").length;
    $this.data('numTD', numTD).find("tr").filter(function() {
        var $this = $(this);
        return $this.children().length == $this.closest('table').data('numTD');
    }).filter(':even').addClass('alt');

})

$("tr.alt td[rowspan]").each(function() {
    $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
});​

then css

.alt { background-color​: #DEDFDE; }​

have fun playing with the demo