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类将从已处于活动状态的行中删除，并添加到接收单击事件的行中。

编辑我忘了你提到你提到要使用键盘导航突出显示行而不是鼠标点击。所以我的答案不是百分之百，尽管我认为它会解决你提出的问题。如果您无法满足您的需求，请告诉我，我会提出更具体的答复。

修改2

请查看原始小提琴的this modification。它与Bootstrap上下文类一起工作正常。这次，我正在使用.info。

我做的修改：

将资源移至资源面板。（我之所以这样做是因为网站建议这样做，我不认识显示的表有Bootstrap样式，所以我认为链接资源可能有错误。没有。）< / LI>

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

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

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

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

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

1 个答案: