Выделите данные ячейки в таблицах данных

Question

Выделите данные ячейки в таблицах данных

Я пытаюсь выделить данные зеленым цветом, которые показывают положительный рост или наоборот.
Но я сталкиваюсь с некоторыми проблемами в браузере Chrome, хотя он отлично работает в Firefox.

Пожалуйста, помогите мне.

$(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>';
?>

Любая помощь будет оценена. Заранее спасибо!

0

android compatibility datatables jquery php

Решение

Другие решения

Это сработало для меня, надеюсь, это поможет:

  <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')                     }
}
]

});

});

0

Этот синтаксис кода обычно работает в Google Chrome:

$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');

0

Источник

Accepted Answer

Вам нужно будет отредактировать CSS и запрограммировать его для Chrome. Ты это пробовал?
редактировать: попробуйте двойные кавычки «, где цвета идут.

0