Datatables：基于值更改单元格颜色_Datatables

Datatables：基于值更改单元格颜色

datatables

Datatables：基于值更改单元格颜色,datatables,Datatables,我正在使用DataTable创建一个交互式表。我有9列，其中5列是值。我想根据每个单元格的特定颜色更改其背景颜色我已经开始尝试改变整个行的颜色第一，因为这似乎是一个更容易的任务。然而，我无法得到任何改变我的代码如下： <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"> <

我正在使用DataTable创建一个交互式表。我有9列，其中5列是值。我想根据每个单元格的特定颜色更改其背景颜色

我已经开始尝试改变整个行的颜色第一，因为这似乎是一个更容易的任务。然而，我无法得到任何改变

我的代码如下：

    <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>

首先，只初始化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');
    }
  }
});

这里有一个

当您使用DataTable初始化时，请尝试查看此Use 1.10特定函数谢谢您回复我。我已经尝试使用上面的代码，但它仍然不适合我。在哪里插入？我是否将其与以下内容一起添加$document.readyfunction{$'countryTable'.DataTable；}；抱歉，如果它看起来很基本，我对此很陌生。@Amy我建议您阅读来自的示例和文档。这将允许您掌握语法和基本操作。一步一个脚印。检查小提琴，并将其与其他例子联系起来。谢谢你的链接真的很有帮助。我把密码放错地方了。非常感谢你的帮助@费城好极了！我实施了它，只为商店收入设定了最低金额。数据正在更改，我想更改前十位数字的颜色，可能吗？我怎么能在一张表中只选择10个最高的数字？@HerculesS。很抱歉，我在数据表方面做得不够，无法回答这个问题。我认为你应该把这当作一个新问题来问。

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