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

Question

我有一个 table，我希望用户使用 up/down 箭头键进行导航，这部分是使用 Datables 的 keyTable 扩展完成的。

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

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

Fiddle 在：https://jsfiddle.net/hqxq7dk1/

Answer 1

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

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

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

上面为点击一行设置了一个事件监听器。 active class 从活动的任何行中删除并添加到接收点击事件的行。

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

编辑 2

请参阅 this modification 到您原来的 fiddle。它与 Bootstrap 上下文 classes 一起工作良好。这次，我使用 .info.

我做的修改：

已将资源移至资源面板。（我这样做只是因为网站建议这样做，我不认为显示的 table 具有 Bootstrap 样式，所以我认为链接资源可能有错误.没有。）

我编辑了原始标记以使用 Bootstrap classes.

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

如前所述，我使用了 Bootstrap info class 并添加了 JavaScript 行以从中删除 class在将其添加到当前行之前选择的行：
```
    table.$('tr.info').removeClass('info');
    $( row.node() ).addClass( "info" );`
```

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

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

Highlight selected row in DataTable using keyTable extension

jquery

datatables

twitter-bootstrap

datatables-1.10