使用jQuery突出显示数据表行不起作用

Question

我感觉这将很容易回答，而且我缺少一些细微之处。

所以就到这里。

我所拥有的是基于某些mySQL填充的表。 数据表代码如下所示：

$("#etlTable").DataTable({
    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "iDisplayLength": 100,
    "ordering": false,
    "autowidth": true,
    "columns": [{ "data": "file_name","class": "nowrap" }, 
                { "data": "start_time", "class": "nowrap" },
                { "data": "end_time"},
                { "data": "duration"},
                { "data": "outcome", "class": "chk"}, 
                { "data": "client_name" },
                { "data": "details" }
               ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[4] == "Fail") {
            $(nRow).children().each(function (index, td) {
                $(this).addClass('res');
            });
        }
    }
});

我认为这可能是导致问题的if语句。 但是我不确定下一步该怎么做。

理想情况下，当“结果”列值=“失败”时，我想突出显示表格行

我可以在没有If语句的情况下正常工作，但这只是突出了整个表，对我不是很有帮助。

表行示例

<tr role="row" class="odd">
    <td class=" nowrap">Customer1_File</td>
    <td class=" nowrap">2014-10-22</td>
    <td>2014-10-22</td>
    <td>00:25:26</td>
    <td>Fail</td>
    <td>Client_name</td>
    <td>Job_Code_Details</td>
</tr>

这是我以前使用的方式，但是由于在运行该表之后将其加载，因此它不起作用：

<script type="text/javascript">
    var i = 0;
    var x = document.getElementsByClassName("chk");

    while (i <= x.length) {
        document.getElementsByClassName("chk")[i].className = "res";
        x = document.getElementsByClassName("chk");
    }; 

</script>

如果我这样做：

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
     $(nRow).children().each(function (index, td) {
         $(this).addClass('res');
     });
}

它突出了我的整个桌子。

我对JQuery / Javascript非常陌生（因为这是我的第一个项目，我从别人那里接管了它，然后尝试将它们拼凑在一起并进行一些改进。）

所以我的问题是，我在这里做错了什么？ 如何根据单元格值突出显示表格的行？

Answer 1

您在第一列定义中有一个错字，但是我怀疑这只是在您上面的示例代码中，而不是您的真实代码中，否则您会注意到。

为您的行回调尝试以下操作：

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    if (aData[4] == "Fail") {
        $(nRow).addClass('res');
    }
}

Answer 2

我可以看到您正在使用dataTables 1.10.x 在此版本中，声明CSS的“正确”非常重要（这样才能与注入的内置CSS一起使用），如下所示：

table.dataTable tr.highlight {
    background-color: lime; 
}

然后像这样声明fnRowCallBack（示例）：

var table = $('#example').DataTable({
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
       if (aData[3] == "Fail") {
           $(nRow).addClass('highlight');
       }
    }    
});

请参阅分页表上的演示-> http://jsfiddle.net/wqbd6qeL/ ... 1.10.x。

---

编辑 ：我看到它几乎与@ John-NotANumber的答案相同，除了CSS。

Answer 3

好吧，我做错了的事情是我正在使用JSON并尝试将其作为数组访问。

$("#etlTable").DataTable({
    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "iDisplayLength": 100,
    "ordering": false,
    "autowidth": true,
    "columns": [{ "data": "file_name","class": "nowrap" }, 
            { "data": "start_time", "class": "nowrap" },
            { "data": "end_time"},
            { "data": "duration"},
            { "data": "outcome", "class": "chk"}, 
            { "data": "client_name" },
            { "data": "details" }
           ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[4] == "Fail") {
            $(nRow).children().each(function (index, td) {
            $(this).addClass('res');
            });
        }
    }
});

因为它是一个数组，并且有一个别名，所以我不得不这样做：

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
     if (aData['outcome'] == "Fail") {
             $(nRow).addClass('highlight');
             $(nRow).css('background-color', '#FFFF00');
     }

     console.log(aData['outcome']);

}

在这里注意这一部分：aData ['outcome']

为了找到这个，我必须添加这个：console.log（aData ['outcome']）;

现在，它运行出色。

Answer 4

http://jsfiddle.net/t4rLk1an/2/

像这样修改表：

<tr role="row" class="odd">
    <td class=" nowrap">Customer1_File</td>
    <td class=" nowrap">2014-10-22</td>
    <td>2014-10-22</td>
    <td>00:25:26</td>
    <td class="correct">Fail</td>
    <td>Client_name</td>
    <td>Job_Code_Details</td>
</tr>

和jQuery一样：

$(document).ready(function(){
    $('.correct').each(function() {          
    if ($(this).html() == 'Fail') {
    $(this).closest('tr').removeClass("chk");
    $(this).closest('tr').addClass("res");
  } 
});
}

);

我不确定您的课程，因为没有CSS。 要尝试，您可以将其更改为

$(document).ready(function(){
    $('.correct').each(function() {          
    if ($(this).html() == 'Fail') {
    $(this).closest('tr').css("background","red");

  } 
});
}

);

Answer 5

也许这样：

$("tr").each(function () {
    if($(this).find('td').eq(4) == "Fail") {
        $(this).removeClass('chk');
        $(this).addClass('res');
    }
});