我有一个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-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
。