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');
});

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

如果鼠标进入元素（最里面的悬停tr），请删除当前突出显示并突出显示当前元素。
如果鼠标离开元素，请突出显示最接近的hovered祖先tr，而不是当前的。{/ li>

使用事件委派的解决方案（例如$.delegate()和$.on()与选择器）的主要优势是仅附加单个事件侦听器（相比之下可能有数十个，数百个）或更多使用传统的，每元素的方法），并能够支持元素的动态变化。

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

JSFiddle

注意：

它有jQuery 1.9.x的问题，但就其他方面而言，就我测试而言，包括更新版本和旧版本。这是由于该版本中:hover伪选择器的问题。

CSS4

CSS level-4有suggested feature，只能使用CSS启用此行为：

tr, !tr:hover tr:hover {
    background-color: transparent;
}
tr:hover {
    background-color: #DDFF75;
}

当然，由于此功能目前不是最终版本，目前任何主要浏览器都不支持，因此本节将作为未来参考。

Answer 2

使用javascript鼠标事件，事件目标应该是最深的元素：

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

这是为了清除鼠标离开桌子的时间：

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

http://jsfiddle.net/tN865/1/

Answer 3

这并不像听起来那么简单，因为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();
    } );
};

这个小宝石会将hover-hint添加到光标下方的所有行。然后，它将查找具有类hover-hint的任何元素，然后将类hover添加到没有hover-hint的任何子元素的所有元素。将只有一个这样的元素：最里面的行。

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

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

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

3 个答案:

使用委派的鼠标事件：

JSFiddle

CSS4