CODEWITHSUNDEEP
jquerycss
Tom
Tom

Reputation: 2634

highlight table row with jquery

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

Upvotes: 4

Views: 21442

Answers (4)

Mahmoud Saleh
Mahmoud Saleh

Reputation: 33605

on row click use the following:

$('.row_selected').removeClass('row_selected');$(this).toggleClass('row_selected');

Upvotes: 0

Thomas W
Thomas W

Reputation: 14164

Try making sure your TD is inside your TR, for a start -- thought it may just be your question, not your code, in error.

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

Then, try capturing the click event on the <TD> -- not on the <TR>. Many things work better on TD than on TR.

$('document').on( "click", "tr.videorow td", function(ev) {
   console.log('click videorow event', ev);
   // do whatever.
});

If you can't get it to work, try just capturing on "td" until you can get the event-handler working & a log message appearing. (You're using Chrome or Firefox, I assume.)

Attaching the event-handlers to the table via an # ID selector, rather than the whole document, might also be more efficient.

$('#MyTable').on( ...);

Anh Tú's comment as to the CSS highlight, is also correct. Make it apply the background to the TD, not the TR. You can also try !important if you're still having trouble (though see http://css-tricks.com/when-using-important-is-the-right-choice/ for more info.)

.highlight td {background-color: #a8cb17 !important;}

Thanks Anh! Hope this helps.

Upvotes: 2

nbrooks
nbrooks

Reputation: 18233

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

Upvotes: 5

user1823761
user1823761

Reputation:

In your code, you wrote:

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

It's has syntax error. The parameter passed to jQuery function is not string. Changed it to this one:

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

Upvotes: 0

Related Questions