Highlight cell data in datatables - php

Question

I'm trying to highlight data in green that is showing positive growth or vice versa.
But i'm facing some issues in Chrome browser while it works fine in Firefox.
Please help me.
$(document).ready(function() {
$('#example').dataTable( {
"ordering": false,
"columnDefs": [
{
"targets": 4,
"createdCell": function (td, cellData, rowData, row, col)
{
if ( cellData.contains("-")) // works fine for Firefox but not for Chrome
$(td).css('color', 'red')
else $(td).css('color', 'green')
}
},
{
"render": function ( data, type, row )
{ return data +' ('+ Math.round(row[4]*10)/10+'%)'; },"targets": 3
}
]
});
} );
</script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<!--DATATABLES-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Metrics</th>
<th>Till Now</th>
<th>Today Trending</th>
<th>Yesterday</th>
<th>DY</th>
<th>5 Day Average</th>
<th>Same Time Last <?php echo date("l");?></th>
<th>Highest</th>
<th>Lowest</th>
<th>Target</th>
<th>Run Rate</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Metrics</th>
<th>Till Now</th>
<th>Today Trending</th>
<th>Yesterday</th>
<th>DY</th>
<th>5 Day Average</th>
<th>Same Time Last <?php echo date("l");?></th>
<th>Highest</th>
<th>Lowest</th>
<th>Target</th>
<th>Run Rate</th>
</tr>
</tfoot>
<tbody>
<?php
while($row = $statement->fetch(PDO::FETCH_ASSOC)){
echo '<tr>';
echo '<td>'.'<strong>'.$row['metric'].'</strong>'.'</td>';
//Till Now
echo '<td>'.number_format($row['Till_Now'], 2, '.', '').'</td>';
//Trending
echo '<td>'.number_format($row['Trending'], 2, '.', '').'</td>';
//Yesterday
echo '<td>'.number_format($row['Yesterday'],2,'.','').'</td>';
//Diff
echo '<td>'.($row['Trending']-$row['Yesterday'])*100/$row['Yesterday'].'</td>';
//5_days_avg
echo '<td>'.number_format($row['5_days_avg'],2,'.','').'</td>';
//STLW
echo '<td>'.number_format($row['stlw'],2,'.','').'</td>';
?>
Any help will be appreciated. Thanks in advance!

Answer 1

you will need to edit the css and program it for chrome. have you tried it?
edit: try double quote marks " where the colors go.

Answer 2

This worked for me, hope it helps :
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"ordering": false,
"columnDefs": [
//Shortening data cell
{
"render": function ( data, type, row )
{ return data +' ('+ Math.round(row[4]*10)/10+'%)'; },"targets": 3
},
//Hide column
{ "visible": false, "targets": [ 4 ] },
//Highlighting data
{
"targets": [3],
"createdCell": function (td, cellData, rowData, row, col){
if ( cellData.indexOf("-")==-1)
$(td).css('color', 'green')
else $(td).css('color', 'red') }
}
]
});
} );

Answer 3

This code syntax usually works in Google Chrome:
$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');