如何根据单元格值DataTable更改行背景颜色？
如何根据单元格值DataTable更改行背景颜色？
提问于 2018-04-11 00:03:42
我使用DataTable插件来显示一些记录。我有3行，名称，日期，金额。我希望该行的背景颜色根据金额列中的特定值进行更改。
这是我的代码：
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var table = $('#tid_css').DataTable({
'iDisplayLength': 100,
"bFilter": false,
"aaSorting" : [[2, "desc"]]
});
} );
</script>
作为一个测试，我在代码旁边添加了以下代码，但得到错误“ DataTables warning: table id=tid_css - Cannot reinitialise DataTable ”
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#tid_css').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[2] == "1" )
{
$('td:eq(2)', nRow).html( '<b>1</b>' );
}
}
} );
} );
</script>
使用不同条件的“fnRowCallback”可以做到这一点，如金额为1，颜色为红色，2 =蓝色，3 =蓝色等。
回答 2
Stack Overflow用户
发布于 2018-04-11 08:14:46
我自己解决了这个问题，我的代码：
$(document).ready( function () {
$('#tid_css').DataTable({
"iDisplayLength": 100,
"bFilter": false,
"aaSorting" : [[2, "desc"]],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[2] == "5" )
{
$('td', nRow).css('background-color', 'Red');
}
else if ( aData[2] == "4" )
{
$('td', nRow).css('background-color', 'Orange');
}
}
});
})Stack Overflow用户
发布于 2018-04-11 09:19:02
代码：
"rowCallback": function( row, data, index ) {
if ( data[2] == "5" )
{
$('td', row).css('background-color', 'Red');
}
else if ( data[2] == "4" )
{
$('td', row).css('background-color', 'Orange');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003848
复制相关文章
相似问题