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

任何帮助将不胜感激。提前谢谢！

Answer 1

您需要编辑css并为chrome编程。你试过吗？编辑：尝试双引号“颜色去哪里。

Answer 2

这对我有用，希望有所帮助：

  <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

此代码语法通常适用于Google Chrome：

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

突出显示数据表中的单元格数据

3 个答案: