如何仅突出显示嵌套表的最里面的表行？

Question

我有几个嵌套表,我想突出显示鼠标指针下方最里面的行.我怎样才能做到这一点？

一些指针:我使用嵌套表来显示递归表格数据.这些表可以嵌套10层深.嵌套就像你期望的那样:

<table><tr><td>
   <table><tr><td>
      <table><tr><td>
          ...

可以有没有嵌套表的行.我希望在<tr>鼠标光标下最深/最里面的高亮显示.

我可以使用CSS或jQuery.

Answer 1

我想提出一些稍微优雅的东西（至少更短）：

使用委托鼠标事件：

$('#mainTable').on('mouseenter mouseleave', 'tr', {el: false}, function (e) {
    var hl = e.data.el;
    hl && hl.removeClass('hover');

    e.data.el = (e.type === 'mouseenter') ?
        $(this).addClass('hover') :
        $(this).parent().closest('tr:hover').addClass('hover');
});

它将当前突出显示的节点存储在（持久）委托数据对象中并处理鼠标事件，如下所示：

• 如果鼠标进入某个元素（最里面的hovered tr），则移除当前高亮并突出显示当前元素。
• 如果鼠标离开某个元素，则突出显示最近的hovered祖先tr而不是当前的祖先。

$.delegate()使用事件委托（例如$.on()选择器）的解决方案的主要优点是仅附加一个事件侦听器（与使用传统的每个元素方法可能有数十个、数百个或更多事件侦听器相比），并且能够支持对事件侦听器的动态更改。元素。

我选择这个解决方案而不是使用 ifmouseover事件，因为我相信进入/离开事件应该提供更好的性能，因为它们不会冒泡。

JSFiddle。

笔记：

据我测试，它在 jQuery 1.9.x 上有问题，但可以与其他版本一起使用，包括新版本和旧版本。这是由于:hover该版本中的伪选择器存在问题。

CSS4

CSS level-4 有一个建议功能，可以仅使用 CSS 来启用此行为：

$('#mainTable').on('mouseenter mouseleave', 'tr', {el: false}, function (e) {
    var hl = e.data.el;
    hl && hl.removeClass('hover');

    e.data.el = (e.type === 'mouseenter') ?
        $(this).addClass('hover') :
        $(this).parent().closest('tr:hover').addClass('hover');
});

当然，由于此功能目前还不是最终版本，并且目前还没有任何主流浏览器支持，因此本节将作为将来的参考。