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

【问题标题】：Row highlight based on a cell value not hapenning in jQuery dataTable基于 jQuery dataTable 中未发生的单元格值的行突出显示
【发布时间】：2016-12-28 23:50:00
【问题描述】：

我正在尝试根据单元格的值突出显示数据表中的一行。但奇怪的是，即使满足应用的条件，css也不会应用。数据表正确显示数据，但行突出显示没有发生。请告诉我哪里出错了。仅供参考..我正在使用客户端数据表。

谢谢！！以下是我的代码：

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;

}

【问题讨论】：

您使用的是什么版本的数据表？ createdRow 是 1.10 的功能，您使用小写的“dataTable”进行初始化的事实让我觉得您使用的是 1.9
@markpsmith 是的，你是对的。我正在使用 jquery 1.9 版本。如何将此代码转换为 jQuery 1.10？
@kkk，只包含 1.10.x js/css 版本。 1.10.x 向后兼容，旧代码应该 1:1 工作。

标签： jquery css jquery-datatables

【解决方案1】：

对 dataTables 1.9 使用 fnRowCallback

...
  { "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');
   });
}

【讨论】：

我厌倦了你的解决方案，它对我的代码没有影响，而不是 'createdRow' 我放了 fnRowCallback ，控件进入了 'if' 条件，但它没有突出显示该行。
您可以使用 Firebug 或类似的工具来查看是否正在应用 highlightRow 类吗？
是的，我放了一个控制台，在 'if' 条件下登录，它会显示在我的控制台上。所以我确信 if 条件得到满足。我已将“highlightRow”类放在 dataTables 的 css“table.dataTable tbody tr”中。也尝试在另一个 CSS 中添加该类。 Fpr 两种情况 - 运气不好！！
可以，但是你可以查看页面源代码并看到<tr class="highlightRow">吗？
我看到为要突出显示的特定行设置了两个类。这是我在源“代码” 中看到的内容。我不想为满足“if”条件的行设置“奇数”类，我只想为其设置“highlightRow”类。

【解决方案2】：

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

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

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

或将.highlightRow 声明为dataTables CSS 的扩展（我认为正确的方式）：

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

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

【讨论】：

我也试过你的解决方案，但对我的“数据表”也没有影响。
@kkk，这是因为我的答案是针对 1.10.x，我认为您正在使用（在您承认使用 1.9.x 之前回答，当人们显示 1.10.x 代码时，我假设他们使用 1.10.x :)。这是一个有效的 1.9.x 版本 -> jsfiddle.net/tnoL173y 我不打算删除答案，因为这个问题 100% 肯定会被要求提供 dataTables 1.10.x。

【解决方案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”类。请注意，上面的变体会将背景应用于具有 some-class 类集的所有行（偶数或奇数）。

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

注意：这已在 DT 版本上得到验证。 1.10.2.

【讨论】：

【解决方案4】：

它对我有用

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

【讨论】：