Grow your CSS skills. Land your dream job.

How to highlight only certain table rows with jQuery?

  • # June 19, 2013 at 5:15 pm

    So I found Chris’s awesome tutorial here, and used it to create my Codepen below:
    http://css-tricks.com/row-and-column-highlighting/

    My Codepen
    http://codepen.io/leongaban/pen/nJzcv

    My problem is that in my real project I do not want to highlight certain rows. I tried to used class names, but to no effect :(

    How would you go about this?

    //Row Highlighting
    $(“table .active”).delegate(‘td’,’mouseover mouseout’, function(e) {
    if (e.type == ‘mouseover’) {
    console.log(‘hovering over row’);
    $(this).parent().addClass(“gray-rollover”);
    }
    else {
    $(this).parent().removeClass(“gray-rollover”);
    }
    });

    // Works but highlights all Rows
    /*$(“table”).delegate(‘td’,’mouseover mouseout’, function(e) {
    if (e.type == ‘mouseover’) {
    console.log(‘hovering over row’);
    $(this).parent().addClass(“gray-rollover”);
    }
    else {
    $(this).parent().removeClass(“gray-rollover”);
    }
    });*/

    # June 19, 2013 at 5:22 pm

    Found solution!
    http://stackoverflow.com/questions/17201408/how-to-highlight-certain-table-rows-using-jquery/17201474?noredirect=1#17201517

    Needed to use thead and tbody to separate the rows

    $(“table > tbody”).delegate(‘td’,’mouseover mouseout’, function(e) {

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

You must be logged in to reply to this topic.

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