レスポンシブルデータテーブルの詳細アイコン条件付きフォーマット

Question

特定の条件でデータテーブルが折りたたまれている場合、詳細シンボルの色を変更したいだけです。ここではそれを

を行うには洙多くの時間を過ごす私のコードです：私は何かを検索したり、それが失敗し、カウントショーのエントリを変更しようとしていたときに仕事を探して

<table class="table table-striped table-bordered dt-responsive nowrap"> 
        <thead> 
         <tr> 
          <th>Heading1</th> 
          <th>Heading2</th> 
          . 
          . 
         </tr> 
        </thead> 
        <tbody> 
          @{ 
          int i = 1; 
          } 
          @foreach(var item in foo) 
          { 
          <tr> 
          <td>Data1</td> 
          <td>Data2</td> 
          . 
          . 
           @if(item.cond == true) 
           { 
<style> 
table.dataTable.dtr-inline.collapsed > tbody > tr:nth-child(@i) > td:first-child:before { 
background-color: red; 
} 
</style> 
           } 
           else 
           { 
<style> 
table.dataTable.dtr-inline.collapsed > tbody > tr:nth-child(@i) > td:first-child:before { 
background-color: white; 
color: blue; 
} 
</style> 
           } 
          </tr> 
          i++ 
          } 
        </tbody> 
</table> 

けど。

私の疑似クラスは変更に失敗しているようです。

私の質問は、 nth-child（）なしでtdを選択するにはどうすればよいですか？また、このスタイルをidセレクタを使用してtdに割り当てることができますか？

Answer 1

特定の条件が発生した場合、tr要素に特別なクラスを追加できます。たとえば：

@foreach(var item in foo) 
{ 
    @if(item.cond == true){ 
    <tr class="row-highlight"> 
    } else { 
    <tr> 
    } 

それからちょうどこれらのCSSルールを使用します。

<style> 
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before { 
    background-color: white; 
} 
table.dataTable.dtr-inline.collapsed > tbody > tr.row-highlight > td:first-child:before { 
    background-color: red; 
} 
</style>