CODEWITHSUNDEEP
javascriptjquerycsshtml
Krupa
Krupa

Reputation: 303

Restrict on-click event for particular column

Can anyone let me know how to disable on click event for particular column.

Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.

Eg :

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>

If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).

Can anyone help me to achieve this

Upvotes: 2

Views: 1269

Answers (3)

Jobelle
Jobelle

Reputation: 2834

 function testing() {

       alert('testing')
   }
   $(document).ready(function () {
       $('table tr td').click(function () {
           if ($(this).index() < 2) {
               testing();
           }
           else {
            //   window.open($(this).find('a').attr('href'));       //working

               $(this).find('a')[0].click();
            }
       });

});

Upvotes: 0

Madhu
Madhu

Reputation: 2551

Try this

Add a class named templatecell to the corresponding td to prevent click.

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()"> 
<td> Krupa </td>
<td> 123 </td>
<td class="templatecell"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
 </table>

script goes like this

$("table").on("click","td", function(e){ 
  if($(e.target).closest(".templatecell").length){
   //Clicked hyper link
   //do action and return from here
   return;
   }
   //Else clicked on td cell show popup
})

Upvotes: 1

Jason Kennaly
Jason Kennaly

Reputation: 651

Try this:

//snip
<tr>
<td onclick = "testing()"> Krupa </td>
<td onclick = "testing()"> 123 </td>
<td> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
//snip

Upvotes: 1

Related Questions