Coloring every second row with rowspan

Question

I want to color every second row of a table. While every regular table can be colored using this:

$('tr:odd').css( "background-color", "orange" );

In my case there are several rowspan, what makes the task more difficult.

This is my desired output:

Using this code above doesn't lead to the desired result:

Here is a fiddle.

$('tr:odd').css("background-color", "orange");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td rowspan="2">Col 1</td>
    <td>Col 2</td>
    <td rowspan="2">Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td rowspan="2">Col 1</td>
    <td rowspan="2">Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

This is answered extensively here: http://stackoverflow.com/questions/10200997/how-to-use-nth-child-for-styling-with-a-table-with-rowspan — Kit, Feb 09 '17 at 13:47
@Kit: The solution there excludes rowspans, what doesn't apply in my case. — Evgenij Reznik, Feb 09 '17 at 13:53
http://stackoverflow.com/questions/3432683/alternate-row-colors-when-you-have-rowspan — ilija veselica, Feb 09 '17 at 13:55
Possible duplicate of [Alternate row colors when you have rowspan](http://stackoverflow.com/questions/3432683/alternate-row-colors-when-you-have-rowspan) — ilija veselica, Feb 09 '17 at 14:02

score 5 · Accepted Answer · answered Feb 09 '17 at 13:52

Do something like this:

$("table tr").filter(function() { 
  return $(this).children().length == 3;
}).filter(':odd').addClass('alt');

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

.alt { background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td rowspan="2">Col 1</td>
    <td>Col 2</td>
    <td rowspan="2">Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td rowspan="2">Col 1</td>
    <td rowspan="2">Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

no need to iterate all the rowspan td's in same row – charlietfl Feb 09 '17 at 13:54 — charlietfl, Feb 09 '17 at 13:54

Coloring every second row with rowspan

1 Answers1