javascript - 禁用单列的点击事件

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 id = "disableClick"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>

如果点击文本(第一列和第二列)，它将调用点击事件。但是，如果用户点击超链接(第 3 列)，我想将其重定向到 Google 而不是点击事件(测试())。

谁能帮我实现这个。

Answer 1

尝试:

$(function() {
  $('table td').on('click', function() {
    if ($(this).index() == 2) {
      return false; // disable 3rd column
    }
  });
  $('table tr').on('click', function() {
    alert('You click the row');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>