jquery - 突出显示数据表中的列

Question

我正在使用数据表来显示分页结果。

在我要求的一个用例中，我需要突出显示一行中的某些列。这些列会因行而异。此外，在运行时（即在对结果集进行 ajax 调用之后）获得有关每行要突出显示的列的信息。

关于如何实现这种行为的任何建议。

Answer 1

您可以为每一行附加一个click侦听器，该侦听器使用 jQuery 查找要突出显示该行的单元格，然后将突出显示样式添加到该单元格。由于一个表可以有很多行，因此最好使用委托事件处理程序（一个处理程序用于处理表中的所有行）。

在此示例中，我使用该data()方法存储和检索最多包含 3 个要突出显示的随机列的数组，尽管您可以调整单击处理程序以从隐藏列中查找值。

工作演示

$(document).ready(function() {
    $('#example').dataTable({
        "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var colsToHighlight = [];
            for(var i=0; i<2; i++) {
                colsToHighlight.push(parseInt((Math.random() * 10), 10) % 5); // pick up to 3 random columns to highligh, may be less due to collisions
            }
            $(nRow).data('highlightCols', colsToHighlight);
        }
    });
} );

$('table').on('click', 'tr', function(e) {
    var row = $(this);
    var colsToHighlight = row.data('highlightCols');
    for(var i=0; i<colsToHighlight.length; i++) {
        row.find('td:eq(' + colsToHighlight[i] + ')').addClass('highlight'); //look up column by index and add highlight class
    }    
});