響應式數據表詳細信息圖標條件格式

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>