Question

任何人都可以让我知道如何禁用特定列的点击事件。

场景：我们在表格中显示用户详细信息，一旦在表格行上进行了点击，弹出对话框窗口将显示更多详细信息（调用ajax请求以从数据库中检索详细信息）。但我们的约束是禁用与表关联的单个列的单击事件。

例如：

<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>

如果对文本（第1列和第2列）进行了单击，则会在单击事件时调用。但是，如果用户点击超级链接（第3列），我想将其重定向到Google但不是点击事件（testing（））。

任何人都可以帮助我实现这个目标

Answer 1

试试这个：

//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

Answer 2

试试这个

将一个名为templatecell的类添加到相应的td以防止单击。

<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>

脚本就像这样

$("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
})

Answer 3

 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();
            }
       });

});

限制特定列的点击事件

3 个答案: