数据表：根据值更改单元格颜色
Posted
技术标签:
【中文标题】数据表：根据值更改单元格颜色【英文标题】：Datatables: Change cell color based on values 【发布时间】：2017-04-24 11:55:42 【问题描述】：我正在使用 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>
我也尝试过使用以下功能，但没有成功。 如果有人可以提供帮助，我会非常喜欢 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');
);
【问题讨论】：
试试看这个datatables.net/release-datatables/examples/advanced_init/… 在使用DataTable初始化时使用1.10特定函数
【参考方案1】：
首先，只初始化一次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
【讨论】：
感谢您回复我。我已经尝试使用上面的代码，但它仍然不适合我。我在哪里插入它？我是否将其添加到以下内容中？ $(document).ready(function() $('#countryTable').DataTable(); ); 抱歉，如果这看起来很基本，我对此很陌生。 @Amy 我建议您阅读来自here 的示例和文档。这将使您掌握语法和基本操作。一步一步来。检查小提琴并将其与其他示例相关联。 谢谢你的链接真的很有帮助。我把代码放在了错误的地方。非常感谢您的帮助！ @philantrovert 太棒了！我实施了它，只是为商店收入设定了最低金额。数据正在改变，我想改变前十个数字的颜色，可能吗？如何只选择表格中的前 10 个（最高）数字？ @HerculesS。很抱歉，我没有与 DataTables 合作来回答这个问题。我相信您应该将其作为一个新问题提出。以上是关于数据表：根据值更改单元格颜色的主要内容，如果未能解决你的问题，请参考以下文章
AG-Grid：如何根据同一行中其他单元格中的值更改单元格的颜色