Reputation: 303
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
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
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
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