Question

我有一个dataTable，在我的表的一列中，我显示的是一个布尔值。我想根据这个布尔值改变td的背景颜色;绿色，当它是真的，红色，当它是假的。这是我的HTML。

<table id="myTable" class="table table-striped m-b-none" data-ride="datatables">
                        <thead>
                            <tr>
                               <th>Food</th>
                               <th>Edible</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {<tr>                                        
                                    <td>@item.FoodName</td>
                                    <td class="@String.Format("alert {0}", ((item.IsEdible) ? "alert-success" : "alert-danger"))">@(item.IsEdible? "Edible" : "Not Edible")</td>                                        
                                </tr>}
                        </tbody>
                    </table>

only white rows are affected

这是js：

  $('#myTable').dataTable({               

            "bProcessing": true,
            "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",               
            "iDisplayLength": 10,
            "sPaginationType": "full_numbers",

            }

表条纹css：

 .table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

无法更改dataTable中灰色行内的td类。我想我需要深入了解dataTable的BaseStyle，但无法弄清楚如何做到这一点。有什么帮助吗？

Answer 1

由于您未在问题中包含CSS规则，因此这是一个有根据的猜测：

适用于table-striped类的CSS规则优先于alert-success和alert-danger类。

它来自CSS规则的顺序（文件中较低的规则优先于先前的规则），或者使用table-striped类的规则可能是更specific规则。

根据您刚刚添加到问题中的规则，您可以添加以下规则来涵盖条带行：

.table-striped > tbody > tr:nth-child(odd) > td.alert-success,
.table-striped > tbody > tr:nth-child(odd) > th.alert-success {
      background-color: green;  
}

.table-striped > tbody > tr:nth-child(odd) > td.alert-danger,
.table-striped > tbody > tr:nth-child(odd) > th.alert-danger{
      background-color: red;  
}

将green和red替换为来自相应background-color类的alert。

Answer 2

在css列表的末尾加载自定义css文件。然后在该文件中为OBJ_CC = \ tools/random.o tools/rng.o tools/ranvar.o common/misc.o common/timer-handler.o \ . . . . goddard/udpapp.o goddard/mchannel_proc.o \ goddard/gframe_queue.o goddard/goddard.o goddard/gplayer.o \ @V_STLOBJ@或alert-success添加一些自定义css。这将优先于alert-danger类规则。

Answer 3

要执行此JS驱动，以便您可以调用此方法并根据数据更改相应地更新数据：

$("#myTable td").each(function(){
if($(this).text()==true){

        $(this).css('background-color','#090');
    }else{
     $(this).css('background-color','#900');
}
})

Answer 4

如果您在表中包含表条带类，则会出现此问题。根据我的解决方案，不要使用这个类，然后它将按你的意愿工作。

无法仅在dataTable

4 个答案: