6

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

一些提示：我使用嵌套表来显示递归表格数据。这些表可以嵌套 10 层深。嵌套就像您期望的那样：

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

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

我可以使用 CSS 或 jQuery。

4

3 回答 3

3

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

使用委托的鼠标事件：

$('#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而不是当前的祖先。

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

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

JSF中。

注意：

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

CSS4

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

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

当然，由于这个功能目前还不是最终的，目前任何主流浏览器都不支持，所以本节将作为未来的参考。

于 2013-09-18T19:19:39.973 回答
1

使用 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/

于 2013-09-18T23:22:42.967 回答
0

这并不像听起来那么简单，因为 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;
}
于 2013-09-18T15:09:40.813 回答