Jquery rowspan tablerow的奇数或偶数颜色

表中为每个TD元素设置了奇数/偶数样式，但由于行跨度的原因，这些样式不起作用。 试穿

CSS样式：

.tablerow1 td {
    background-color:#FFFFFF;
}
.tablerow2 td {
    background-color:green;
}

HTML代码：

<table border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Number</th>
    </tr>
    <tr class="tablerow1">
        <td rowspan="1"><p>Cash</p></td>
        <td><p>Cash</p></td>
        <td><p>00000</p></td>
    </tr>
    <tr class="tablerow2">
        <td rowspan="2"><p>Receivables</p></td>
        <td><p>Receivable</p></td>
        <td><p>00</p></td>
    </tr>
    <tr>
        <td><p>Accounts</p></td>
        <td><p>0</p></td>
    </tr>
</table>

---

如何解决这个问题？

您可以使用css交替应用颜色

.tablerow1 td:nth-child(even) {
    background-color:#FFFFFF;
}
.tablerow2 td:nth-child(odd) {
    background-color:green;
} 

尝试伪元素：类型的第n个

应收账款

标记的类别为tablerow2。

---

即使它被涂抹在多行上，它仍然有那个类。

无论如何都无法使它与css一起工作。您必须使用JS来调整表

如果您使用的是jQuery，可以这样做：

// each table cell with rowspan
$('table tr>*[rowspan]').each(function(){ 
  // get rowspan attribute
  let rowspan = $(this).attr('rowspan');
  // cast it to a useful numeric value
  rowspan = (typeof rowspan == 'string' || typeof rowspan == 'number') ? parseInt(rowspan): 1;
  // if 1 or below, no adjustments are necessary
  if (rowspan > 1) {
    // row of the affected cell
    let row = $(this).parent();
    // all silbing rows including the affected one
    let rows = row.parent().children();
    // index of the last potential row to be adjusted
    let indexlast = row.index()+rowspan-1;
    // for first row after rowspan to last one affected
    for (let i = row.index()+1; i<=indexlast; i++) {
      // if an affected sibling row has not the same modulo 2 index (equals odd and even or even and odd)
        if (row.index() % 2 != i % 2){
          // adds a class to reverse the logic
          rows.eq(i).addClass('reverse-even-odd');
        }
    }
    // only even numbered rowspans, to fix coloring on sequent elements
    if (rowspan % 2 == 0){
      // inserts a clearing row
      $('<tr class="clear-even-odd"></tr>').insertAfter(rows.eq(indexlast));
    }
  }
});

请注意，代码没有经过优化，无法处理一行中的多个不同行跨-但这将终止着色

请注意，这是为了保持字段的颜色与行跨度一致。受影响行的所有其他单元格均以相同颜色显示。但是，同样的技术可以用于实现不同的结果

---

请注意，用于基于索引处理表或使用排序的逻辑不是这样工作的，这些逻辑也必须进行调整。但是，这些内容通常必须进行定制，才能在具有合并单元格的表上工作。

您希望帐户也是绿色的吗？您希望它看起来像什么？另外，您想使用jquery还是css？如果不删除jquery标记样式，它们将按设置工作。如果我理解正确，帐户和0单元格也应为绿色。在这种情况下，有人删除了正确的答案。@KishoreMohan为什么不在第三个tr标记中添加一个类，例如tablerow3-

// each table cell with rowspan
$('table tr>*[rowspan]').each(function(){ 
  // get rowspan attribute
  let rowspan = $(this).attr('rowspan');
  // cast it to a useful numeric value
  rowspan = (typeof rowspan == 'string' || typeof rowspan == 'number') ? parseInt(rowspan): 1;
  // if 1 or below, no adjustments are necessary
  if (rowspan > 1) {
    // row of the affected cell
    let row = $(this).parent();
    // all silbing rows including the affected one
    let rows = row.parent().children();
    // index of the last potential row to be adjusted
    let indexlast = row.index()+rowspan-1;
    // for first row after rowspan to last one affected
    for (let i = row.index()+1; i<=indexlast; i++) {
      // if an affected sibling row has not the same modulo 2 index (equals odd and even or even and odd)
        if (row.index() % 2 != i % 2){
          // adds a class to reverse the logic
          rows.eq(i).addClass('reverse-even-odd');
        }
    }
    // only even numbered rowspans, to fix coloring on sequent elements
    if (rowspan % 2 == 0){
      // inserts a clearing row
      $('<tr class="clear-even-odd"></tr>').insertAfter(rows.eq(indexlast));
    }
  }
});

table tr:nth-child(odd).reverse-even-odd,
table tr:nth-child(even){
background-color:#faa /* any color */
}
table tr:nth-child(even).reverse-even-odd,
table tr:nth-child(odd){
background-color:#aaf /* any color */
}