当您有行跨度时替换行颜色

我有这个 HTML：

<table class="altRowTable">

<script type="text/javascript">
  $(document).ready(function() {
    $("table.altRow tr:odd").css("background-color", "#DEDFDE");
  });
</script>

这工作正常，直到我有一些行包含rowspan（各行不一致）。

所以我有这样的东西（下面的“-”代表一个空格 - 不能真正在 SOF 中做表:)）

|---ID---|---name---|---Number---|   
|---1----|---joe----|-----1------|   
|--------|---tom----|-----2------|   
|---2----|---joe----|-----3------|   
|---3----|---joe----|-----4------|   
|---4----|---joe----|-----6------|   
|---5----|---joe----|-----5------|   
|--------|---tom----|-----3------|   

如何使行跨度内的所有行保持相同的背景色？

可能有一种更巧妙的方法来做到这一点，但这是一种方法：

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

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

它使用 CSS 类而不是颜色，如下所示：

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

你可以在这里尝试一下，你可以交换:even and :odd在第一个代码块中执行您想要的任何模式（例如，:odd没有很好地说明它，因为那是行without rowspan cells).

它的作用是找到具有以下内容的行all单元格（而不是部分行）获取其中的奇数或偶数并应用一个类。然后第二遍看those行，如果有的话rowspan=""它得到的细胞.rowSpan（DOM 属性），当前行减一，并应用向下多行的类，通过.nextAll() and .slice().