I am looking for a way to dynamically highlight specific rows in a table based on data retrieved from the server. For example, if the data contains "Activated", I want to change the background color of that row to green.
Check out this code snippet for more details-
for(i=1; i<=adminlen;i++)
{
if(adminresults.drivers[i-1].loginstatus !== "blocked") {
var loginstate = "Block";
} else {
var loginstate = "Unblock";
}
if(admins[i-1].driver_status === 'ON - FREE') {
var linkone = '</td><td><a href="#" class="btn btn-success
btn-xs"><i class="fa fa-taxi"></i>'+admins[i-
1].driver_status;
} else if(admins[i-1].driver_status === 'ON - TRIP') {
var linkone = '</td><td><a href="#" class="btn btn-default
btn-xs"><i class="fa fa-taxi"></i>'+admins[i-
1].driver_status;
} else if(admins[i-1].driver_status === 'OFF') {
var linkone = '</td><td><a href="#" class="btn btn-danger
btn-xs"><i class="glyphicon glyphicon-off">
</i>'+admins[i-1].driver_status;
} else if(admins[i-1].driver_status === 'BREAK') {
var linkone = '</td><td><a href="#" class="btn btn-default
btn-xs"><i class="fa fa-coffee"></i>'+admins[i-
1].driver_status;
} else {
var linkone = '</td><td><a href="#" class="btn btn-warning
btn-xs"><i class="glyphicon glyphicon-off">
</i>'+admins[i-1].driver_status;
}
var driverid = admins[i-1].driverid;
var $formrow = '<tr><td><a id="'+admins[i-1].driverid+'"
onclick="myFunction2(this.id);" data-toggle="modal" data-
target="#myModal" value="'+admins[i-
1].driverid+'">'+admins[i-1].firstname+
'</a></td><td>'+admins[i-1].lastname+
'</td><td>'+admins[i-1].phonenumber+
'</td><td>'+admins[i-1].vehiclenumber+
linkone+
'</td><td>'+admins[i-1].loginstatus+
'</td><td><a href="#" class="btn btn-success btn-
xs">'+admins[i-1].accountstate+'</a></td></tr>';
$('#example').append($formrow);
}
$(document).ready(function() {
$('#example').DataTable();
});
<div class="table-responsive">
<table id="example" class="display" cellspacing="0">
<thead><tr><th>First Name</th><th>Last Name</th>
<th>Phone Number</th><th>Vehicle Number</th><th>Duty Status</th>
<th>Login Status</th><th>Account Status</th></tr>
</thead>
</table>
</div>
$('#example')
.removeClass( 'display' )
.addClass('table table-striped table-bordered');