Datatables：根据值更改单元格颜色

我正在使用DataTable创建交互式表。我有9列，其中5个是价值观。我想根据它们的具体情况更改每个单元格的背景颜色。Datatables：根据值更改单元格颜色

我已经开始尝试改变整个行颜色，因为这看起来更容易。但是我无法得到任何改变。

我的代码如下：

<head> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>  

    <script> 
     $(document).ready(function(){ 
      $('#countryTable').DataTable(); 
     }); 
    </script> 

    <script> 
     $(document).ready(function() { 
     $('#countryTable ').DataTable({ 
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       if (aData[3] > 11.7) 
       { 
        $(nRow).css('color', 'red') 
       } 
       else if (aData[2] == "4") 
       { 
        $(nRow).css('color', 'green') 
       } 
      } 
     }); 
    </script> 

</head> 

<body>  

    <table id ="countryTable" class="display" cellspacing="0" data-page-length='193'> 
<thead> 
    <tr> 
     <th>Rank</th> 
     <th>Country</th> 
     <th>Code</th> 
     <th>Total</th> 
     <th>Beer</th> 
     <th>Wine</th> 
     <th>Spirits</th> 
     <th>Other</th> 
     <th>Score</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>Estonia</td> 
     <td>EE</td> 
     <td>14.97</td> 
     <td>5.87</td> 
     <td>1.65</td> 
     <td>5.64</td> 
     <td>1.81</td> 
     <td>3 - Medium Risky</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Belarus</td> 
     <td>BY</td> 
     <td>14.44</td> 
     <td>2.5</td> 
     <td>0.75</td> 
     <td>6.73</td> 
     <td>4.46</td> 
     <td>4 - Very Risky</td> 
    </tr> 

</tbody>

我也使用下面的函数尝试，但没有运气。如果任何人都可以帮助它会非常appriciataed，因为我非常想要Java脚本。

$(document).ready(function() { 
     $('#countryTable').DataTable({ 
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       if (aData[3] == "5") 
       { 
        $('td', nRow).css('background-color', 'Red'); 
       } 
       else if (aData[3] == "4") 
       { 
        $('td', nRow).css('background-color', 'Orange'); 
       } 
      } 
     });

来源

2016-12-09 Amy

尝试见状http://datatables.net/release-datatables/examples/advanced_init/row_callback.html – MVCNoob

当你使用'DataTable'初始化时使用1.10特定函数 – philantrovert

首先，初始化DataTable只有一次。然后按照你的问题，使用rowCallback而不是fnRowCallBack如下图所示：

var oTable = $('#countryTable').DataTable({ 
    'rowCallback': function(row, data, index){ 
    if(data[3]> 11.7){ 
     $(row).find('td:eq(3)').css('color', 'red'); 
    } 
    if(data[2].toUpperCase() == 'EE'){ 
     $(row).find('td:eq(2)').css('color', 'blue'); 
    } 
    } 
});

这里有一个fiddle

来源

2016-12-09 07:28:55 philantrovert

谢谢你回复我。我试过使用上面的代码，但它仍然不适合我。我在哪里插入它？我是否加入以下内容？对不起，如果它看起来很基本，我对此很新。 – Amy

@Amy我建议你阅读[这里]的示例和文档（https://www.datatables.net/examples/index）。这可以让你掌握语法和基本操作。一步一步来。检查小提琴并将其与其他示例关联。 – philantrovert

谢谢你的链接真的有帮助。我把代码放在了错误的地方。非常感谢您的帮助！ – Amy

Datatables：根据值更改单元格颜色

回答

相关问题