Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Table Row and Column Highlighting on multiple tables

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #44227
    hellsing
    Member

    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?

    #132372
    hellsing
    Member

    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’)

    #132383
    Mottie
    Member

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

    #132385
    Merri
    Participant

    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.

    #132412
    hellsing
    Member

    Thanx Guys, both of you helped me a lot!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.