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 に答える