基于内容更改jquery datatable的单元格背景 [英] change cell background of jquery datatable based on content

问题描述

我是新的数据资料 - http://datatables.net/ - 。我有麻烦找到一个例子，我可以根据其位置和内容来更改单元格的背景颜色。

I am new to datatables - http://datatables.net/ - . I am in trouble to find an example how I could change the background color of a cell based on its position and content.

像这样的东西对我有用，除了突出显示在已更改背景颜色的单元格中，所选行的现在为
'overcolored'。如果我可以在fnRowCallback中获取该行的类名，那么我可以处理它。

Something like this worked for me except that the highlighting of the selected row is now 'overcolored' in the cells which have changed background color. If I could get the class name of the row in the fnRowCallback then I could handle it.

$(document).ready(function() {

   // Add a click handler to the rows - this could be used as a callback 
   $("#example tbody").click(function(event) {

      $(oTable.fnSettings().aoData).each(function() {
         $(this.nTr).removeClass('row_selected');
      });
      (event.target.parentNode).addClass('row_selected');
   });


   oTable = $('#example').dataTable({

      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {

         $(nRow).children().each(function(index, td) {

            if (index == 6) {

               if ($(td).html() === "pending") {
                  $(td).css("background-color", "#078DC6");
               } else if ($(td).html() === "rendering") {
                  $(td).css("background-color", "#FFDE00");
               } else if ($(td).html() === "success") {
                  $(td).css("background-color", "#06B33A");
               } else if ($(td).html() === "failure") {
                  $(td).css("background-color", "#FF3229");
               } else {
                  $(td).css("background-color", "#FF3229");
               }
            }
         });
         return nRow;
      },
      "bProcessing": true,
      "bServerSide": true,
      "sAjaxSource": "scripts/server_processing.php",
      "sPaginationType": "full_numbers",
   });
});

推荐答案

$('table:last tr:nth-child(2) td:nth-child(2)').
  css("background-color", "#cccccc");

这篇关于基于内容更改jquery datatable的单元格背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！