1

我<tr>在一张桌子上有多个，其中一些后面跟着一个<tr class="colapsed">有一些细节的。并非所有<tr>标签都有详细信息。我需要创建交替的颜色，但忽略折叠的类。我试过使用table>tbody>tr:nth-child(odd) { background:red }，但它似乎没有按我的意愿工作。

有任何想法吗？

table>tbody>tr:not(.collapsed):nth-child(odd) {
  background: red
}
.collapsed {
  display: none
}
<table class="rwd-table table-auto doubletr">
  <tbody>
    <tr class="">
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

这里的答案没有描述我的情况。我试图防止奇怪的事件考虑所有具有折叠类的标签。

替代解决方案
对于那些处于相同情况的人。由于:nth-选择器不关心可见性，我使用一个简单的 jquery 函数解决了我的问题。

var n = 1;
$("table>tbody>tr:not('[class*=collapsed]')").each(function() {
  if (n % 2) { //even
    $(this).css("background", "red");
  } else { //odd
    $(this).css("background", "yellow");
  }
  n += 1;
})

4

1 回答 1

1

鉴于:nth-选择器不关心可见性，我认为这是不可能的。你可以:not去掉你不想要的，但:nth不会在它的算法中跳过它。也许这会有所帮助？

http://nthmaster.com/

于 2016-05-03T14:47:44.353 回答