使用 keyTable 扩展突出显示 DataTable 中的选定行

Question

我有一个表格，我希望用户使用向上/向下箭头键导航，这部分是使用 Datables 的 keyTable 扩展来完成的。

我还希望突出显示包含焦点单元格的表格行。我已经尝试过这段代码，它应该将 selected 类添加到应该反过来突出显示它的行中，但它没有。

table
    .on( 'key-focus', function ( e, datatable, cell ) {
        var row = datatable.row( cell.index().row );
        $( row.node() ).addClass( "selected" );
    } );

拨弄：https://jsfiddle.net/hqxq7dk1/

Answer 1

对于 Bootstrap 表，类不是 selected，而是您可能想要 active。 （虽然我猜任何contextual class 都可以。）

我正在使用 DataTables v1.10.10，我也需要突出显示选定的行。我相信我已经提取了相关代码：

    $('#MY_TABLE tbody').on('click', 'tr', function () {
            table.$('tr.active').removeClass('active');
            $(this).addClass('active');
    }

Above 为点击一行设置了一个事件监听器。 active 类将从任何已激活的行中删除并添加到接收到点击事件的行中。

编辑我忘了考虑到您提到要使用键盘导航而不是鼠标单击来突出显示该行。所以我的回答不是 100% 正确，尽管我认为它会解决你提出的问题。如果您无法适应以上需求，请告诉我，我会给出更具体的回复。

编辑 2

请参阅this modification 你原来的小提琴。它适用于 Bootstrap 上下文类。这一次，我使用的是.info。

我所做的修改：

1. 将资源移至资源面板。 （我这样做只是因为网站建议这样做，而且我没有识别出显示的表格具有 Bootstrap 样式，所以我认为链接资源可能有错误。没有。）

2. 我编辑了原始标记以使用 Bootstrap 类。

       <table id="example" class="table table-striped table-bordered table-condensed" width="100%">
   

3. 如前所述，我使用了 Bootstrap info 类并添加了一个 JavaScript 行，以便在将其添加到当前行之前从先前选择的行中删除该类：

       table.$('tr.info').removeClass('info');
       $( row.node() ).addClass( "info" );`
   

第二点是让它发挥作用的关键——也就是说，始终使用 Bootstrap CSS 规则。 （那并从先前的活动行中删除该类。）我意识到这个答案会导致您的样式发生变化，您可能不喜欢。但它回答了您的问题，为什么您必须定义 select 规则，并且您可能正在使用 Bootstrap，因为您喜欢他们的样式选择。