我有一个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,但无法弄清楚该如何做。有什么帮助吗?

最佳答案

由于您没有在问题中包含CSS规则,因此这是有根据的猜测:

对于table-striped类应用的任何CSS规则都将优先于alert-successalert-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-coloralert

09-10 11:34
查看更多