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

我只想在特定条件下折叠datatable时更改细节符号颜色。花很多时间做这件事

这是我的密码：

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

标题1
标题2
.
.
@{ 
int i=1；
}
@foreach（foo中的变量项）
{
数据1
数据2
.
.
@如果（item.cond==true）
{
table.dataTable.dtr-inline.collapsed>tbody>tr:nth child（@i）>td:first child:before{
背景色：红色；
}
}
其他的
{
table.dataTable.dtr-inline.collapsed>tbody>tr:nth child（@i）>td:first child:before{
背景色：白色；
颜色：蓝色；
}
}
我++
}

看起来不错，但当我试图搜索某些内容或更改显示条目计数时，失败了

似乎我的伪类在更改时失败

我的问题是,；

---

如何在没有n-child（）的情况下选择td，或者如何将此样式分配给id选择器的td？

当出现某些情况时，您可以向

tr

元素添加特殊类。例如：

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

@foreach（foo中的变量项）
{
@如果（item.cond==true）{
}否则{
}

然后只需使用以下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>

table.dataTable.dtr-inline.collapsed>tbody>tr>td:第一个孩子：之前{
背景色：白色；
}
table.dataTable.dtr-inline.collapsed>tbody>tr.row-highlight>td:第一个子项：之前{
背景色：红色；
}

当某些情况发生时，您可以向

tr

元素添加特殊类。例如：

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

@foreach（foo中的变量项）
{
@如果（item.cond==true）{
}否则{
}

然后只需使用以下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>

table.dataTable.dtr-inline.collapsed>tbody>tr>td:第一个孩子：之前{
背景色：白色；
}
table.dataTable.dtr-inline.collapsed>tbody>tr.row-highlight>td:第一个子项：之前{
背景色：红色；
}

太好了！非常感谢！太好了！非常感谢！