jQuery 数据表突出显示行

Question

我正在使用数据表版本 1.9.4，并且在向某些行添加类时遇到问题。

我有多个数据表，全部具有“显示”类。我使用 jQuery 选项卡在单独的选项卡上显示每个数据表。

一切运行良好，除了我想根据列值向表行添加一个类；如果第 6 列小于第 14 列，我想添加 myClass。

我找到了使用 fnRowCallback 的建议，但我得到了随机结果，例如有时如果第 6 列小于第 14 列，myClass 会正确添加，但其他时候如果第 14 列小于第 6 列 myClass 仍然会添加！

但这并不是所有行都会发生，所以它是相当随机的。

这是我正在使用的代码

$(document).ready(function() {

  $('.display').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "bScrollCollapse": true,
    "sScrollY": "300px",
    "sAjaxSource": "ajax.php",
    "sDom": '<"H"lfr>t<"F"ipS>',
    "oScroller": {
        "loadingIndicator": true
    },
    "fnRowCallback": function( nRow, aData ) {
      var $nRow = $(nRow);
      if (aData[6] < aData[14]) {
        $nRow.addClass("myClass");
      }
      return nRow
    }
  });

});

我所做的有问题吗，还是因为我使用了多个表？

Answer 1

我想我可以做到这一点，但可能有一种更干净的方法，所以如果有人知道更好的方法，请告诉我！

绘制表格后，我将循环遍历每个表格的所有行......

"fnDrawCallback": function( oSettings ) {
    for (var i = 0, row; row = oSettings.nTable.rows[i]; i++) {
        price = Number(row.cells[4].innerHTML.replace(/[^0-9\.]+/g,""));
        average = Number(row.cells[6].innerHTML.replace(/[^0-9\.]+/g,""));
         if (price < average) {
             row.className = row.className + " myClass";
         }
    }
}

Answer 2

试试这个:-)

JS：

 $('.table tr td').hover(function () {
        $(this).parent().children().addClass('highlighted-1')
        $('td:nth-child(' + this.cellIndex + ')').addClass('highlighted-2');
    }, function () {
        $(this).parent().children().removeClass('highlighted-1')
        $('td:nth-child(' + this.cellIndex + ')').removeClass('highlighted-2')
    });

CSS：

.highlighted-1 { background: green !important;}
.highlighted-2 { background: lightgreen !important;}