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

Question

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

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

有关如何实现此行为的任何建议。

Answer 1

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

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

<强> Working Demo

$(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
    }    
});