How to select only the innermost row of a table in a nested table?

Question

I have several nested tables, and I want to select the innermost row that is below the mouse pointer. How can i do this?

Some pointers: I use nested tables to display recursive tabular data. Tables can be nested in 10 levels. The attachment is the same as you expected:

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

There are rows that do not have nested tables. I want to highlight on the deepest / innermost <tr> that is under the mouse cursor.

I can use CSS or jQuery.

Answer 1

I would suggest something a little more elegant (at least shorter):

Using delegated mouse events:

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

Saves the selected selected node object to a (persistent) delegated data object and processes mouse events as follows:

• If the mouse enters an element (the innermost, hovering tr ), remove the current highlight and highlight the current element.
• If the mouse leaves the item, select the nearest hovered ancestor tr instead of the current one.

The main advantages of solutions using event delegation (for example, $.delegate() and $.on() with a selector) attach only a single event listener (compared to potentially dozens, hundreds or more using traditional, per-element, methods) and the ability to support dynamic changes for an element.

I chose this solution to use if the mouseover event is because I believe that I / O events should provide better performance because they do not bubble.

JSFiddle .

Note:

It has a problem with jQuery 1.9.x, but works with the others as far as I tested, including newer and older versions. This is due to a problem with the :hover pseudo :hover in this version.

---

CSS4

The CSS-4 layer has a suggested feature that can enable this behavior only with CSS:

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

Of course, since this function is currently not final and is not supported by any major browser at the moment, this section will serve as reference information.

Answer 2

Using javascript mouse events, the purpose of the event should be the deepest element:

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

And this is to clear when the mouse exits the table:

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

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

Answer 3

This is not as simple as it seems, since CSS does not have an element with children with certain attributes; Selectors always match only the last element in the chain. But with a little jQuery magic, you can make it work. First style:

 .hover { background: #eaf0ff; } 

Then call this function when adding new tables:

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

This little stone will add hover-hint to all the lines under the cursor. He will then search for any element with the hover-hint class, and then add the hover class to all elements that do not have children with hover-hint . There will be only one such element: the innermost line.

But when you try this, you will get an ugly flicker when you move the mouse in the space between the rows of the nested table, because this space (cell spacing) is not part of the line before CSS, so the parent line will be launched. To prevent this, you need to remove the spacing between cells:

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