SEER SEER - 11 months ago 59
jQuery Question

Can't change the background colour of td only in grey rows in dataTable

I have a dataTable and in one column of my table I am showing a value which is boolean. I want to change the background colour of the td according to the value of this boolean; green when it's true and red when it's false. Here is my html.

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

only white rows are affected

And here is the js:


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


Table striped css:

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

Can't change the class of td which is inside grey row in dataTable. I think I need to dive in BaseStyle of dataTable but couldn't figure it out how to do it. Any help?

Answer Source

Since you haven't included your CSS rules in your question, this is an educated guess:

Whatever CSS rule is getting applied for the table-striped class is taking priority over the alert-success and alert-danger classes.

It's either from the order of the CSS rules (rules lower in the file take precedence over previous rules), or the rule using the table-striped class may be a more specific rule.

Given the rule you just added to your question, you can add the following rule to cover the striped rows:

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

Replacing the green and red with whatever the background-color is from the appropriate alert classes.