响应式数据表详细信息图标条件格式

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>