Question

我有这个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------|

如何将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; }

You can give it a try here，您可以在第一个代码块中交换:even和:odd来执行您想要的任何模式（例如，:odd没有很好地说明它，因为这是行没有 rowspan单元格。）

这样做是找到 all 的行，而不是部分行，获取奇数或偶数行，并应用一个类。然后第二遍查看那些行，如果它们有任何rowspan=""个单元格，则获取.rowSpan（DOM属性），减去当前行的一个，并应用通过.nextAll()和.slice()将许多行放下的课程。

Answer 2

@ nick-craver提供的解决方案不适用于包含使用rowspan 和 colspan属性的单元格的表格。下面修改后的代码说明了这一点，但它确实假设所有行的标签总数及其colspan值相等。

感谢你指出我正确的方向，虽然@ nick-craver！

// This the maximum number of columns in your table, E.g. In this case a column crossing the whole table would have colspan="3"

var column_count = 3;

$("table.altRow tr").filter(function() {

  // Adds row children and colspan values of those children

  var child_count = 0;
  $("td", this).each(function(index) {
    if ($(this).attr('colspan') != null) {
      child_count += parseInt($(this).attr('colspan'));
    } else {
      child_count += 1;
    }
  });

  return child_count == column_count;
}).filter(':even').addClass('alt');

$("tr.alt td[rowspan]").each(function() {
  $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
});

有rowpan时的备用行颜色

2 个答案: