Question

我试图根据单元格的值突出显示dataTable中的一行。但奇怪的是，即使符合要求的条件，也不会应用css。数据表正在正确地显示数据，但行突出显示不是hapenning。请告诉我哪里出错了。 fyi ..我正在使用客户端 dataTables。

谢谢！以下是我的代码：

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;

}

Answer 1

将fnRowCallback用于dataTables 1.9

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

UPDATE ：我可以复制评论中描述的这个问题 - 我基本上无法将该类应用于该元素。为了解决这个问题，您可以将该类应用于子元素。

尝试：

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

Answer 2

被.highlightRow推翻

table.dataTable tbody tr，除非您使用!important：

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

参见演示 - ＆gt;的 http://jsfiddle.net/56abtw2t/

或声明.highlightRow作为dataTables CSS的扩展（在我看来是正确的方式）：

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

参见演示 - ＆gt;的 http://jsfiddle.net/onaeyqkL/

Answer 3

根本问题是DT应用行突出显示的方式。这是表条带化的默认css：

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

根据这一点，背景颜色应用于表中所有奇数行的所有td。乍一看这似乎是不合逻辑的，但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;
}

然后可以根据一个特定用例的需要向tr添加/删除“some-class”类。请注意，上面的变体将背景应用于具有某类类设置的所有行（偶数或奇数）。

在DT网站上似乎没有详细记录。

注意：这是在DT ver上验证的。 1.10.2。

Answer 4

它对我有用

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

基于jQuery dataTable中未发生的单元格值突出显示行

4 个答案: