Alternate row colors when you have rowspan

Answer 1

The solution provided by @nick-craver doesn't work for tables with cells which use both the rowspan and colspan attributes. The modified code below accounts for this, though it does assume that the total number of tags and their colspan values are equal for all rows.

Thanks for pointing me in the right direction though @nick-craver!

// This the maximum number of columns in your table, E.g. In this case a column crossing the whole table would have colspan="3"

var column_count = 3;

$("table.altRow tr").filter(function() {

  // Adds row children and colspan values of those children

  var child_count = 0;
  $("td", this).each(function(index) {
    if ($(this).attr('colspan') != null) {
      child_count += parseInt($(this).attr('colspan'));
    } else {
      child_count += 1;
    }
  });

  return child_count == column_count;
}).filter(':even').addClass('alt');

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