基于jQuery数据中未指向的单元格值的行突出显示表

我试图根据单元格的值突出显示dataTable中的一行。但奇怪的是，即使符合条件，css也不适用。数据表正确地显示数据，但行高亮不起作用。请告诉我哪里出错了。我使用客户端 dataTables。基于jQuery数据中未指向的单元格值的行突出显示表

谢谢！下面是我的代码：

的jQuery：

//data to be added to dataTable is added into the html table before this line. 
    oTableQ= $('#myDataTable').dataTable({ 
      "sPaginationType": "full_numbers", 
      "bLengthChange":false, 
      "bInfo": true, 
      "columns": [ 
        null, 
        null, 
       null, 
        null, 
       null, 
       null, 
       null, 
       null, 
       null, 
       { "visible": false } 
     ], 
     "createdRow": function(row, data, dataIndex) { 
      if (data[9] == "ACTIVE") { 
       $(row).addClass('highlightRow'); //this line has no effect on the page even if the 'if' condition is satisfied. 
       console.log(" row text is : "+ $(row).text() + "data at 9th column : " + data[9]); 
      } 
      }, 

      "iDisplayLength":10 
      });

CSS：

.highlightRow { 
    background-color: #ffaabb;

}

来源

2014-09-23 kkk

您正在使用什么版本的DataTable的呢？ 'createdRow'是一个1.10的特性，而且你用小写'dataTable'初始化的事实让我觉得你正在使用1.9 – markpsmith 2014-09-23 10:44:59

@markpsmith是的，你是对的。我使用jQuery 1.9版本。如何将此代码转换为jQuery 1.10？ – kkk 2014-09-23 11:12:04

@kkk，只包含1.10.x js/css版本。 1.10.x是向后兼容的，旧代码应该工作在1：1。 – davidkonrad 2014-09-23 11:19:42

对于dataT使用fnRowCallback ABLES 1.9

... 
    { "visible": false } 
    ], 
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
if (aData[9] == "ACTIVE"){   
    $(nRow).addClass('highlightRow'); 
    } 
}

更新：我可以复制在注释中说明这个问题 - 我根本无法将类应用到元素。为了解决它，您可以将该类应用于子元素。

尝试：

if (aData[9] == "ACTIVE"){ 
$(nRow).children().each(function (index, td) { 
     $(this).addClass('highlightRow'); 
    }); 
}

来源

2014-09-23 11:21:10 markpsmith

我累了你的解决方案，它对我的代码没有任何影响，而不是'createdRow'我把fnRowCallback，控制进入'如果'条件，但它不会突出显示该行。 – kkk 2014-09-23 12:29:24

您是否可以使用Firebug或类似工具查看'highlightRow'类是否正在应用？ – markpsmith 2014-09-23 12:38:35

是的，我把一个控制台，登录'如果'条件，并显示在我的控制台。所以我相信，如果条件得到满足。我已将'highlightRow'类放入dataTables的css'table.dataTable tbody tr'中。试图在另一个CSS中添加该类。 Fpr两种情况 - 没有运气！ – kkk 2014-09-23 12:42:26

.highlightRow由table.dataTable tbody tr否决，除非你使用!important：

.highlightRow { 
    background-color: #ffaabb !important; 
}

看到演示 - >http://jsfiddle.net/56abtw2t/

或声明.highlightRow作为数据表CSS的扩展（以正确的方式，在我看来）：

table.dataTable tbody tr.highlightRow { 
    background-color: #ffaabb; 
}

看到演示 - >http://jsfiddle.net/onaeyqkL/

来源

2014-09-23 11:14:02 davidkonrad

我试过你的解决方案，对我的'DataTable'也没有任何影响。 – kkk 2014-09-23 12:39:31

@kkk，这是因为我的回答是针对1.10.x，我认为你使用的是（在你准许使用1.9.x之前回答，当人们展示1.10.x代码时，我假设他们使用1.10.x :) 。这里是一个工作的1.9.x版本 - > http://jsfiddle.net/tnoL173y/我不打算删除答案，因为这个问题100％肯定会被要求提供dataTables 1.10.x。 – davidkonrad 2014-09-23 12:55:01

根本的问题是在DT应用于行高亮的方式。下面是表条纹的默认CSS：

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { 
    background-color: #f9f9f9; 
}

据此，背景颜色应用于所有表中的所有奇数行的运输署的。这看起来似乎不合逻辑，但DT还提供了进行柱状条纹的能力，这基本上要求在td级应用背景颜色。如果一个人想基于行应用自定义行背景颜色

所以（TR）类，必须做一些事情沿着这些路线：

然后

.some-class, .table-striped > tbody > tr:nth-child(2n+1).some-class > td, .table-striped > tbody > tr:nth-child(2n+1).some-class > th { 
    background : #fafd96 !important; 
}

一个可以添加/删除“一些一流“根据个人特殊用例的需要，将其分类。请注意，上面的变体会将背景应用于设置了某些类的所有行（偶数或奇数）。

这在DT网站上似乎没有很好的记录。

注意：这已在DT版本中验证。 1.10.2。

来源

2016-02-23 14:06:57 Chris

它的工作我

$('table#example') 
.find("tr").find('td:eq(6):contains(null)').parent().css('backgroundColor', 'yellow') // row higlingting

来源

2016-12-28 15:50:00

基于jQuery数据中未指向的单元格值的行突出显示表

回答

相关问题