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

【问题标题】：Highlight cell data in datatables突出显示数据表中的单元格数据
【发布时间】：2014-10-16 19:55:49
【问题描述】：

我试图以绿色突出显示正增长的数据，反之亦然。但是我在 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>'; 
      ?>

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

【问题讨论】：

我尝试的另一种选择是：“createdCell”：function (td, cellData, rowData, row, col) { if ( cellData.contains("-")) $(td).css(' color', 'red') else $(td).css('color', 'green') } 适用于 Firefox，但会引发 chrome 错误。
我知道这不是这里的主题，但是当你在加载 jquery 之前调用 $ 并且不使用花括号关闭你的 php while 循环时，这如何工作？
这段代码只是sn-p所以'}'在这里不可见，即使我在脚本之前加载我的jquery它也不起作用。显然这是一个兼容性问题，我需要替代 createdCell 回调函数。请帮忙。
当我尝试分别执行 createdCell 和 render 函数时它工作正常，但在 Chrome 中一起使用时却不行。
您是否尝试console.log 一些元素，例如cellData 或td，以查看它们是否在chrome 中正确设置？

标签： php jquery google-chrome datatables compatibility

【解决方案1】：

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

【讨论】：

如何为 chrome 编程？

【解决方案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')                     }
    }
]

});

});

【讨论】：

【解决方案3】：

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

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

【讨论】：