数据表...如何根据表格的单元格值更改单元格的颜色

时间:2016-04-27 07:53:24

标签: javascript datatable bootstrap-modal

我正在使用Datatable Concept,但不知道如何根据单元格值更改单元格的颜色。我知道如何根据单元格值更改整行的颜色.. 这是我用于行的代码.. 我应该在哪里更改代码...... ??

$('#example').DataTable( {
                //"bDestroy": true, // NOT Working THis Function Here ...!!! 
                dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                retrieve: true,
                //FOR COLOR CODING AS PER THE VALUES in THe ROW/ CELL..!!!-NOW IT is for the Entire Row .. !!
                "fnRowCallback": function( nRow, myInfraArray)
                {
                            if ( myInfraArray[3] == "" )
                            {
                                $('td', nRow).css('background-color', '#F08080');
                            }
                            else if ( myInfraArray[3] == "Not Availiable" )
                            {
                                $('td', nRow).css('background-color', '#F08080');
                            }
                            else if ( myInfraArray[3] >= 5 && myInfraArray[3] <= 15)
                            {
                                $('td', nRow).css('background-color', '#90EE90');
                            }
                            else if (myInfraArray[3] >= 0 && myInfraArray[3] <= 4 )
                            {
                                $('td', nRow).css('background-color', '#FFDAB9');
                            }

                        }
                    } );

1 个答案:

答案 0 :(得分:0)

我已经解决了IT ...... :) 这是代码用于根据单元格值更改单元格的颜色...

     $('#example').DataTable( {
                        //"bDestroy": true, // NOT Working THis Function Here ...!!! 
                        dom: 'Bfrtip',
                        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                        retrieve: true,
                        //FOR COLOR CODING AS PER THE VALUES in THe ROW/ CELL..!!!-NOW IT is for the Entire Row .. !!
                        "fnRowCallback": function( nRow, myInfraArray)
                        {
                                      $(nRow).children().each(function(index, td, myInfraArray) {     
                                        if ($(td).html() == "") {
                                              $(td).css("background-color", "#F08080");
                                           } else if ($(td).html() == "Not Available") {
                                              $(td).css("background-color", "#F08080");
                                           } else if (($(td).html() >= 5 && $(td).html() <= 20)) 
{  $(td).css("background-color", "#90EE90");
                                           } else if (($(td).html() >= 00 && $(td).html() <= 4) || ($(td).html()=="not working"))
     $(td).css("background-color", "#FF3229");
                                    $('table:last tr:nth-child(2) td:nth-child(2)').
                                    css("background-color", "#cccccc");
                                } );
                                return nRow;
                                }
                            } );