Question

我在表格中有多个<tr>，其中一些后跟一个<tr class="colapsed">，其中包含一些详细信息。并非所有<tr>标记都包含详细信息。我需要创建交替的颜色但忽略折叠的类。我曾尝试使用table>tbody>tr:nth-child(odd) { background:red }，但它似乎无法按我的意愿运作。

有什么想法吗？

＆＃13;

table>tbody>tr:not(.collapsed):nth-child(odd) {
  background: red
}
.collapsed {
  display: none
}

＆＃13;

<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>

＆＃13;

答案here并不能描述我的情况。我试图阻止奇数事件考虑崩溃类的所有标签。

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

＆＃13;

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;
})

＆＃13;

Answer 1

我不相信这是可能的，因为int选择者并不关心可见性。您可以private int Checkfilter(BugReportFilter filter)出自您不想要的内容，但int不会在其算法中跳过它。也许这会有所帮助？

http://nthmaster.com/

表交替颜色nth-child：not（.class）

1 个答案: