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