How to trigger event only when i click table row but not when i click table row element

Question

Here i am adding a class to row which i am clicking on. the issue i am facing is i have a text box and dropdown field inside a table. but when i click on textbox or dropdown to input value the function is getting triggered. what i exactly want to do is when i click on the row then the class should added, when i click on the element inside the table row the class should not get added.

how can i do this?

here is what i have done.

<script>
var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        $(this).addClass('selected');
    })
</script>



<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

you are technically clicking the table row when you click anything inside of it. There are ways to do what you are asking but why would you want to only add the class if the tr element is clicked and nothing else? I see you are adding class selected... what is the intention of this class? to highlight the row? when would the user just select the row and nothing inside? — floor
– floor, Commented Feb 8, 2018 at 14:01

epascarello · Accepted Answer · 2018-02-08 14:11:40Z

Check to see if what is clicked on is the cell or the input with the events target

var taBody = $('.extab tbody') 
taBody.on('click', 'tr', function (evt) {
  if($(evt.target).is('td')) {
    $(this).toggleClass('selected');
  }
})

.selected{
  background: red;
}
td{
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Ankit Agarwal · Accepted Answer · 2018-02-08 14:05:11Z

I have added padding on td for better illustration. And this works perfectly fine as you need.

var tabRow = $('.extab tbody tr');    
tabRow.on('click',function(){
    $(this).addClass('selected');
})
$('.extab tbody tr td *').click(function(e){
  e.stopPropagation(); 
});

.selected{
  background: red;
}
td{
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Vivek Doshi · Accepted Answer · 2018-02-08 14:08:27Z

0

You can do it like :

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        console.log('row clicked');
        $(this).addClass('selected');
    });

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

tr td {
 padding: 5px;
 background-color : red;
}

tr.selected td {
  background-color : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

edited Feb 8, 2018 at 14:08

answered Feb 8, 2018 at 14:00

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

4 Comments

floor Over a year ago

would this prevent the drop down from being selected?

Vivek Doshi Over a year ago

@floor , No it not , please check the added snippet

floor Over a year ago

I see you can select the menu, but if I was to add an on click event to the menu or on change would that still work?

Vivek Doshi Over a year ago

@floor , it would ignore the clicks only of the elements within td

Collectives™ on Stack Overflow

How to trigger event only when i click table row but not when i click table row element

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related