CODEWITHSUNDEEP
javascriptjquery
Ceejay
Ceejay

Reputation: 7257

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

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>

Upvotes: 1

Views: 2397

Answers (3)

epascarello
epascarello

Reputation: 207501

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>

Upvotes: 3

Vivek Doshi
Vivek Doshi

Reputation: 58533

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>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 1

Related Questions