根据内容更改jquery数据表的单元格背景

Question

我是数据表的新手 - http://datatables.net/ - .我很难找到一个例子,我可以根据它的位置和内容来改变单元格的背景颜色.

这样的东西对我有用,除了所选行的突出显示现在在已改变背景颜色的单元格中"过度着色".如果我可以在fnRowCallback中获取行的类名,那么我可以处理它.

$(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",
   });
});

Answer 1

我知道问题已经回答了,但我想我会分享我是如何通过以下方式将各种单元格的"条件格式"应用于各种单元格的:

首先,我在数据表初始化期间为每一列添加了一个类:

"aoColumns": [{
                "mDataProp": "serial",
                "sClass": "serial"
            }, {
                "mDataProp": "us",
                "sClass": "us"
            }...],

然后,我创建了一个addFormat()函数,每次重绘时调用它(我必须这样做,因为我有一个实时更新的实时表):

"fnDrawCallback": function(oSettings) { addFormat(); },

在addFormat函数中,我基本上通过CSS类定义了所有格式化规则.我使用了jQuery:包含扩展,以便使用正则表达式等应用非常具体的规则.这些规则的选择器将是td我在数据表初始化期间分配给列的任何类:

 $("td.us:containsRegex(/^[xtfv]$/)").addClass("s4 queue");

这对我很有用.

Answer 2

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