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
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");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With