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

参见演示 - ＆gt; http://jsfiddle.net/wqbd6qeL/ ... 1.10.x在分页表上。

编辑：我发现除了CSS之外，它几乎与@ John-Notanumber的答案相同。

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 [＆＃39;结果＆＃39;]

要找到这个我必须添加：console.log（aData [＆＃39;结果＆＃39;]）;

现在它的效果非常出色。

Answer 4

function hightlight_interseptions(a , b) {
    var count=0;
    $('#ItemTable tr').filter(':not(:first)').each(function() {
        if (count==a || count==b) $(this).addClass('highlight');
        count++;
    }); 
}

Answer 5

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 6

也许这个：

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

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

6 个答案: