使表格行成为可点击的链接，但让TD中的链接仍然工作

Make table row clickable link, but let links in TD still work

本文关键字：链接 TD 但让 工作 表格      更新时间：2023-09-26

第一个要求是使表行表现得像一个可点击的链接。

各种好的来源指出，你必须使用javascript来实现这一点，我选择了这一个使表行可点击

它使用jQuery和TR标签中的link-data属性。

然而，我希望做任何<在TD单元格内的a>标签链接也能正常工作。期望的结果是，如果你点击表中的一个链接，它正常工作，但如果你点击TR上的其他任何地方，它会转到link-data url。

这是我目前拥有的，但是任何在行的任何地方点击，链接或不链接到数据链接地址。

$("tr[data-link]").click(function() {
  window.location = this.dataset.link;
});
<tr class="clickable-row" data-link="/invoices/10">
  <td>6</td>
  <td>2014-06-09</td>
  <td></td>
  <td>&pound;343,242.00</td>
  <td>&pound;68,640.00</td>
  <td><a href="/jobs/770">0453</a></td>
</tr>

我想在jQuery/Javascript

你应该这样做:

 $("tr[data-link]").click(function(e) {
   if(e.toElement.tagName=='A') return
   window.location = this.dataset.link;
});

如果用户单击A元素，函数将不执行(返回)。

Amina的答案仍然是正确的。但是自从使用它之后，我发现了一个后续的bug，我想我应该指出来。

IE给(e)一个不同于其他浏览器的对象。因此，要使IE使用这种技术，您需要在JavaScript中添加以下三行代码来预过滤事件对象。 
$("tr[data-link]").click(function(e) {
  // Catch where i.e. doesnt give us the clicked object.
  var elem, evt = e ? e:event;
  if (evt.srcElement)  elem = evt.srcElement;
  else if (evt.target) elem = evt.target;
  // If Anchor, or form input, return and do normal stuff  
  if(elem.tagName=='A' || elem.tagName=='INPUT') return;
  window.location = this.dataset.link;
});

还要注意额外的tagName=='INPUT'是我自己将来添加的，因此单击中的任何输入字段也将被忽略。

相关文章：