使用jQuery来突出显示不工作的数据表行

Using jQuery to highlight datatable row not working

本文关键字：工作 数据表 显示 jQuery 使用      更新时间：2023-09-26

我有一种感觉，这将是一个相当简单的答案，我错过了一些相当小的东西。

所以它开始了。

我所拥有的是一个基于一些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还很陌生（因为这是我的第一个项目，我从别人那里接手了它，并尝试将它拼凑在一起并进行一些改进。）

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

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

请尝试以下方式进行行回调：

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

我可以看到您正在使用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。

好吧，我做错的是我使用了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']）；

它现在运行得非常出色。

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

也许这个：

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

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");
  } 
});
}
);
相关文章：