有rowpan时的备用行颜色

Question

我有这个HTML:

<table class="altRowTable">

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

这样可以正常工作,直到我有一些包含a的行rowspan(它在行之间不一致).

所以我有这样的东西(下面" - "表示一个空格 - 在SOF中不能真正做表:))

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

如何将rowspan中的所有行保持相同的背景颜色？

Answer 1

可能有一种更为流畅的方式,但这是一种方式:

$("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并:odd在第一个代码块中做你想要的任何模式(用例子,:odd没有很好地说明,因为那是没有 rowspan单元格的行).

这样做的是找到包含所有单元格而不是部分行的行,获取奇数或偶数行并应用类.然后第二遍查看那些行,如果它们有任何rowspan=""单元格,它就会获得.rowSpan(DOM属性),减去当前行的一行,并通过.nextAll()和应用多行向下的类.slice().