Javascript 如何仅高亮显示嵌套表的最内层表行？

我有几个嵌套的表，我想突出显示鼠标指针下面最里面的一行。我该怎么做

一些指针：我使用嵌套表来显示递归表格数据。这些表可以嵌套10层深。嵌套与您预期的一样：

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

...

可以有没有嵌套表的行。我想突出显示鼠标光标下最深/最里面的

---

我可以使用CSS或jQuery。

这并不像听起来那么简单，因为CSS中没有“具有特定属性的子元素”；选择器始终只匹配链中的最后一个元素。但只要有一点jQuery的魔力，就可以让它工作。首先是风格：

.hover {
    background: #eaf0ff;
}

然后在添加新表时调用此函数：

var installInnerMostHover = function(){

    var updateHover = function() {
        $('.hover').removeClass('hover');
        $('.hover-hint').each(function(index,e) {
            if($(e).find('.hover-hint').length === 0) {
                $(e).addClass('hover');
            }
        });
    };

    $("tr").off("mouseenter mouseleave");
    $("tr").hover( function(){
        $(this).addClass('hover-hint');
        updateHover();
    },  function(){ 
        $(this).removeClass('hover-hint');
        updateHover();
    } );
};

这个小宝石将向光标下方的所有行添加

悬停提示。之后，它将查找带有类
悬停提示的任何元素，然后将类
悬停提示添加到没有子元素的所有元素中。这样的元素只有一个：最里面的一行

但是，当您尝试此操作时，当您在嵌套表的行之间的空间中移动鼠标时，您将看到一个丑陋的闪烁，因为就CSS而言，此间隙（单元格间距）不是行的一部分，因此父行将被触发。要防止出现这种情况，需要删除单元格间距：

table { 
    border-spacing:0;
    border-collapse:collapse;
}

我想提出一些更优雅（至少更短）的建议：

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


如果鼠标进入一个元素（最里面的悬停的
tr
），则删除当前突出显示并突出显示当前元素
如果鼠标离开某个元素，则突出显示最近的悬停的
祖先
tr
，而不是当前元素


使用事件委派的解决方案（例如带有选择器的
$.delegate（）
和
$.on（）
）的主要优点是只附加一个单个事件侦听器（相比之下，使用传统的每个元素的方法可能会附加几十个、数百个或更多）并且能够支持元素的动态更改

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

.
注:

它在jQuery1.9.x中有一个问题，但在我测试的其他版本中可以使用，包括较新和较旧的版本。这是由于该版本中的
：hover
伪选择器存在问题


CSS4
CSS级别4具有一个仅使用CSS即可启用此行为的功能：

tr！tr：悬停tr：悬停{
背景色：透明；
}
tr：悬停{
背景色：#DDFF75；
}

当然，由于此功能目前不是最终功能，并且目前没有任何主要浏览器支持，因此本节将作为将来的参考。
使用javascript鼠标事件，事件目标应该是最深层的元素：

$('tr').mouseover(function(e){
    $(e.target).parents('tr').removeClass('hover').first().addClass('hover');
});

当鼠标离开桌子时，要清除此选项：

$('#main-table').mouseout(function(e){
    $(this).find('tr').removeClass('hover');
});         

请分享相关的htmlsample@ArunPJohny：这是一个标准的嵌套表。没有什么奇怪或幻想。我猜答案是一个单行CSS选择器，它可以设置阻止突出显示外部行。关于嵌套表，有很多奇怪的事情。嵌套表可以有多行。也许这个问题的措辞有些笨拙。@Aarondigula，我添加了一个我觉得不错的解决方案，希望得到您的反馈。+1看起来真的很有趣。我特别喜欢“只有一个侦听器”和“当DOM改变时不需要重新安装它们”。我对jQuery1.9.x的bug有点不满意，但我可以升级到1.10，所以这只是一个小问题。
$('#main-table').mouseout(function(e){
    $(this).find('tr').removeClass('hover');
});