Grow your CSS skills. Land your dream job.

Table Row and Column Highlighting on multiple tables

  • # April 18, 2013 at 5:26 pm

    Hi Guys,

    I use the code from Chris Coiyer’s article ‘Table Row and Column Highlighting’. Here is the code:


    $(document).ready(function() {
    $('table').delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
    $(this).parent().addClass('hover');
    $('colgroup').eq($(this).index()).addClass('hover');
    }
    else {
    $(this).parent().removeClass('hover');
    $('colgroup').eq($(this).index()).removeClass('hover');
    }
    });
    });";

    Everything was fine until I used only one table per page. Now I have a page with 14 tables (results of a questionarie). The highlight on the rows are OK, but the columns are highlighted allways on the uppermost table, even if the mouse is over a lower one. The HTML markup is OK.

    I think this line should work fine:

    $('colgroup').eq($(this).index()).addClass('hover');

    …but it adds the ‘hover’ class allways to the colgroup of the first table.

    Any idea how should I modify the code?

    # April 18, 2013 at 5:39 pm

    Here is a screen capture to better understand what happens when the mouse pointer is over the lower table:

    ![highlight error](http://www.rozsahegyi.net/images/tableHighLight.jpg ‘Check the lighter cols and rows’)

    # April 18, 2013 at 11:55 pm

    Hi @hellsing!

    Try this code ([demo](http://jsfiddle.net/Mottie/quHEc/)):

    $(function () {
    $(‘table’).each(function () {
    var $table = $(this).delegate(‘td’, ‘mouseover mouseleave’, function (e) {
    if (e.type == ‘mouseover’) {
    $(this).parent().addClass(‘hover’);
    $table.find(‘colgroup’).eq($(this).index()).addClass(‘hover’);
    } else {
    $(this).parent().removeClass(‘hover’);
    $table.find(‘colgroup’).eq($(this).index()).removeClass(‘hover’);
    }
    });
    });
    });

    Or, if you’re using jQuery 1.7+, it’s better to use `.on()` instead of `.delegate()` ([demo](http://jsfiddle.net/Mottie/quHEc/1/)):

    $(function () {
    $(‘table’).each(function () {
    var $table = $(this).on(‘mouseover mouseleave’, ‘td’, function (e) {
    if (e.type == ‘mouseover’) {
    $(this).parent().addClass(‘hover’);
    $table.find(‘colgroup’).eq($(this).index()).addClass(‘hover’);
    } else {
    $(this).parent().removeClass(‘hover’);
    $table.find(‘colgroup’).eq($(this).index()).removeClass(‘hover’);
    }
    });
    });
    });

    # April 19, 2013 at 12:02 am

    I did other kind of improvements on this: http://codepen.io/Merri/pen/IDlhq

    $(function() {

    $(‘table’).on(‘mouseenter mouseleave’, ‘td’, function(e) {
    (function(td, type) {
    td.parent()[type](‘hover’);
    td.closest(‘table’).children(‘colgroup’).eq(td.index())[type](‘hover’);
    })(
    $(this),
    e.type === ‘mouseenter’ ? ‘addClass’ : ‘removeClass’
    );
    });

    });

    Removed some code repetition, used mouseenter instead of mouseover and also fixed the bug of not finding the related colgroup elements. CodePen sample also includes code to add new rows so you can see it is indeed dynamic.

    # April 19, 2013 at 3:42 am

    Thanx Guys, both of you helped me a lot!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".