What is the best way to select just the innermost row of a nested table for emphasis?

Question

What is the best way to select just the innermost row of a nested table for emphasis?

I am working on a project with multiple nested tables and I am looking for a way to highlight the innermost row below the mouse pointer. How can I achieve this?

Just to provide some context, I am using nested tables to present recursive tabular data, with the potential for nesting up to 10 levels deep. The structure of the nesting is straightforward, resembling the following:

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

It is worth noting that there are rows within the tables that do not contain nested tables. My goal is to highlight the deepest/innermost <tr> that the mouse cursor is hovering over.

I am open to implementing this using either CSS or jQuery. Thank you for any guidance you can provide.

javascript jquery html css highlighting

Answer 1

Answer №1

Allow me to suggest a more concise and sophisticated approach:

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

This method stores the currently highlighted node in a persistent delegated data object and manages the mouse events with the following logic:

When the mouse enters an element (the innermost hovered tr), remove the current highlight and highlight the current element.
When the mouse leaves an element, highlight the closest hovered ancestor tr instead of the current one.

The primary benefits of using event delegation solutions like $.delegate() and $.on() with a selector include having just a single event listener (as opposed to potentially numerous listeners with traditional methods) and the ability to accommodate dynamic changes to the element.

I opted for this solution over using the mouseover event because I believe the enter/leave events offer better performance, as they do not bubble.

JSFiddle.

Please note:

There is an issue with jQuery 1.9.x, but it functions properly with other versions I tested, including newer and older releases. This problem arises from an inconsistency with the :hover pseudo-selector in that particular version.

CSS4

CSS level-4 proposes a feature that could facilitate this behavior using CSS exclusively:

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

Although this feature is not yet finalized and lacks support from major browsers currently, this section will serve as a reference for future advancements.

Answer 2

Allow me to suggest a more concise and sophisticated approach:

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

This method stores the currently highlighted node in a persistent delegated data object and manages the mouse events with the following logic:

When the mouse enters an element (the innermost hovered tr), remove the current highlight and highlight the current element.
When the mouse leaves an element, highlight the closest hovered ancestor tr instead of the current one.

The primary benefits of using event delegation solutions like $.delegate() and $.on() with a selector include having just a single event listener (as opposed to potentially numerous listeners with traditional methods) and the ability to accommodate dynamic changes to the element.

I opted for this solution over using the mouseover event because I believe the enter/leave events offer better performance, as they do not bubble.

JSFiddle.

Please note:

There is an issue with jQuery 1.9.x, but it functions properly with other versions I tested, including newer and older releases. This problem arises from an inconsistency with the :hover pseudo-selector in that particular version.

CSS4

CSS level-4 proposes a feature that could facilitate this behavior using CSS exclusively:

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

Although this feature is not yet finalized and lacks support from major browsers currently, this section will serve as a reference for future advancements.

Answer 3

Answer №2

Incorporating JavaScript mouse events is essential for targeting the deepest element:

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

Additionally, the following code is included to remove the hover effect when the mouse exits the table:

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

For a live example, visit: http://jsfiddle.net/tN865/1/

Answer 4

Incorporating JavaScript mouse events is essential for targeting the deepest element:

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

Additionally, the following code is included to remove the hover effect when the mouse exits the table:

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

For a live example, visit: http://jsfiddle.net/tN865/1/

Answer 5

Answer №3

Creating a CSS selector to target elements with children possessing specific attributes is not a straightforward task. CSS selectors typically only target the last element in a chain. However, by utilizing some jQuery techniques, achieving this effect is possible. First, let's define the style:

.hover {
    background: #eaf0ff;
}

Next, trigger this function whenever new tables are inserted into the document:

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 function will apply the class hover-hint to all rows beneath the cursor. Then, it will identify elements with the class hover-hint and add the hover class to those elements without any children containing hover-hint. This will encompass just the innermost row.

Nevertheless, implementing this may result in an unsightly flickering effect when moving the mouse between rows of a nested table due to the cell spacing causing triggering of the parent row. To address this, remove the cell spacing as follows:

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

Answer 6

Creating a CSS selector to target elements with children possessing specific attributes is not a straightforward task. CSS selectors typically only target the last element in a chain. However, by utilizing some jQuery techniques, achieving this effect is possible. First, let's define the style:

.hover {
    background: #eaf0ff;
}

Next, trigger this function whenever new tables are inserted into the document:

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 function will apply the class hover-hint to all rows beneath the cursor. Then, it will identify elements with the class hover-hint and add the hover class to those elements without any children containing hover-hint. This will encompass just the innermost row.

Nevertheless, implementing this may result in an unsightly flickering effect when moving the mouse between rows of a nested table due to the cell spacing causing triggering of the parent row. To address this, remove the cell spacing as follows:

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

What is the best way to select just the innermost row of a nested table for emphasis?

Answer №1

Utilizing delegated mouse events:

JSFiddle.

CSS4

Answer №2

Answer №3

Similar questions

What is the best way to transfer parameters from the Vue root to a component?

Creating responsive images using Bootstrap CSS framework

Tips for postponing the initiation of multiple carousels on a single page?

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

If a quote character is detected in a string, color the line red

Creating a bar chart in Chart JS using an array of data objects

Initial button click fails to trigger onclick event

`The issue with the masked input feature``

Creating a fixed list with top-sticking elements on a webpage using HTML

Utilizing Google's Text-to-Speech Service to Download Audio Files on the Front-end

Sending an array through AJAX using JavaScript/JQuery

Utilizing Chart.js to extract and display specific data values from an external JSON file

Expanding and hiding content using jQuery while also utilizing cookies for persistence

Modify the second dropdown list using Jquery when the first dropdown list changes

Showcasing MySQL Data With Divs

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

How to execute a system command or external command in Node.js

Tips for fetching form data transmitted via HTTPS in Node.js?

Combining video.js and vue.js for seamless integration

Leveraging the power of jQuery's $.when and $.then methods for efficiently managing multiple AJAX requests that do not