CODEWITHSUNDEEP
jqueryonclick
kastermester
kastermester

Reputation: 3064

Click event on table row - only trigger if nothing else is 'clicked'

I'm having some issues with some jQuery code, and I'm hoping and thinking that the solution is relatively simple.

Say I have a table like:

<table>
   <tr>
     <td><input type="checkbox" name="hai" value="der" /></td>
     <td><a href="mypage.php">My link</a></td>
     <td>Some data</td>
     <td>Some more data</td>
   </tr>
   ...
</table>

Now through JavaScript I do the following in jQuery(document).ready();

jQuery("table tr").click(function(){
   var row = jQuery(this);
   var hasClass = row.hasClass("highlight");
   jQuery("table tr").removeClass("highlight");
   if(!hasClass){
     row.addClass("highlight");
   }
});

All of this is pretty simple stuff - I want to be able to click a row and have it being highlighted and only one row can be highlighted at a time (obviously in my actual code I do more than that) - now here's my problem:

When a user clicks the anchor tag, or the checkboxes, this triggers the row click event as well and I cannot work out how to filter that out? I know I need to include the event in my click handler, but how to check for this in a such way that it works in as many browsers as possible?

Upvotes: 12

Views: 14748

Answers (3)

Chad Grant
Chad Grant

Reputation: 45382

$("table tr").click(function(event){
   if (event.currentTarget.tagName != "TR") { return; }

   $(this).closest("table").find("tr.highlight").removeClass("highlight");
   $(this).addClass("highlight");
});

Upvotes: 3

user434917
user434917

Reputation: 

$("table tr").click(function(e){

if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
return;
}
var row=$(this);
$('table tr').removeClass('highlight');
row.addClass('highlight','normal');

})

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532435

Try adding handlers to the other elements that respond to click events and stop the event from bubbling up. This would be in addition to what you already have.

jQuery('table input, table a').click( function(e) {
    e.stopPropagation();
    return true;
}):

Upvotes: 15

Related Questions