使用数据表和固定列时如何在悬停时突出显示整行？

Question

我尝试了 google 前 3 页上的所有链接 - 没有任何效果。会重视一些建议..提前致谢。

CSS分别突出固定和非固定：

.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
    background-color: #ffff99
}

Answer 1

问题

DataTables 的固定列扩展通过创建第二个 table 来工作，然后将其叠加在原始 table 之上。两个独立的 table 看起来像一个 table，但具有不同的行为（固定与滚动）。

这就是为什么（如您所见）将鼠标悬停在固定部分上不会影响可滚动部分的行底纹 - 反之亦然。

解决方案

解决此问题的最简单方法是不使用 DataTables 的悬停效果，而是提供您自己的悬停效果。

为此，相关 JavaScript 需要能够在“其他”table 中找到与“悬停”table 中的行相对应的匹配行.

我们可以通过将 DataTables 内部行索引写入每个 table.

中的 <tr> 标记来简化此操作

这是我的起始HTML数据，仅供测试：

<div style="margin: 20px;">

    <table id="example" style="width:150%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>,000</td>
            </tr>
        </tbody>
    </table>

</div>

然后我有我的数据表定义：

var table = $('#example').DataTable( {
  "scrollX": true,
  "fixedColumns": true
} );

之后，我使用以下代码为每个 <tr> 节点添加自定义属性：

table.rows().every( function () {
  var rowNode = this.node();
  var rowIndex = this.index();
  $(rowNode).attr( 'data-dt-row', rowIndex );
} );

这使用数据表 API 和一些 jQuery。

最终结果如下所示：

<tr role="row" data-dt-row="2">

最后，我有一个事件处理程序可以检测光标何时悬停在一行上：

$('tr').hover(function () {
  var thisNode = $( this );
  var rowIdx = thisNode.attr( 'data-dt-row' );
  console.log( rowIdx );
  //$( "tr" ).css("background-color", "white"); // remove all shading
  $( "tr[data-dt-row='" + rowIdx + "']" ).css("background-color", "yellow"); // shade only the hovered row
  });

这里的关键是"tr[data-dt-row='" + rowIdx + "']"的使用。此 jQuery 选择器找到相关（悬停）行索引的两行：左侧 table 的行和右侧 table的匹配行。

这是一个 fiddle 显示最终结果的操作：

https://jsfiddle.net/7h9wuevq/

以及截图：

使用数据表和固定列时如何在悬停时突出显示整行？

How to highlight entire row on hover when using datatables and fixed columns?

javascript

css

datatables