Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highlight table row with jquery

Tags:

jquery

css

I know there are tons of posts on this, but I'm lost as to why mine doesn't work.

I'm trying to highlight a row in my table:

<tr class="videorow"><td>...</td>...</tr>
...

css:

.highlight {
   background-color: #a8cb17;
}

and finally my jQuery:

jQuery(document).on("click", ".videorow", function() {

    //highlight table
    jQuery(".highlight").removeClass("highlight");
    jQuery(this).addClass("highlight");
});

Basically I want to highlight a row and clear out when a new row is selected. This is the first part I can't even figure out.

In addition I want to highlight the entire row except I don't want the last column to trigger a highlight. In other words you can click the last column of the row but that won't change the highlight.

Something like:

jQuery(document).on("click", ".videorow", function() {

    //highlight table
    jQuery(".highlight").removeClass("highlight");
    jQuery('table tr td:not(:last-child)').addClass("highlight");
});

Any guidance on both of these issues is appreciated.

EDIT: typing too fast. Syntax errors are just me writing this out instead of copying...fixed now

like image 810
Tom Avatar asked Mar 24 '23 01:03

Tom


1 Answers

jQuery(document).on("click", "tr.videorow > td", function() {
    var $this = jQuery(this);

    // ignore clicks on last column
    if ( $this.is(":last-child") ) return;

    // unhighlight currently selected row
    jQuery(".highlight").removeClass("highlight");

    // change the highlight of the row        
    $this.parent().addClass("highlight");
});
like image 69
nbrooks Avatar answered Apr 01 '23 06:04

nbrooks