使用rowspan着色每隔一行

Question

我想为表格的每一行着色。虽然每个常规表都可以使用以下颜色进行着色：

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

在我的情况下，有几个rowspan，这使得任务更加困难。

这是我想要的输出：

使用上面的代码并不会产生预期的结果：

Here is a fiddle

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

做这样的事情：

$("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>