使用 jQuery 制作一个可点击的表格行 (tr)（带有一个 href 链接，然后悬停！？）答案

【问题标题】：Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)使用 jQuery 制作一个可点击的表格行 (tr)（带有一个 href 链接，然后悬停！？）
【发布时间】：2011-01-23 11:18:38
【问题描述】：

只是一个（希望是）快速的问题，我有以下 HTML 代码：

<tr>
 <td><img src="img/icons/file_pdf.png"></td>
 <td><a href="../upload/1267473577.pdf">Bulletin 1st March 2010</a></td>
 <td>(01/03/10)</td>
</tr>

理想情况下，我想要一种使用 jQuery 获取 a href 链接的方法，这样无论您在何处单击该特定表格行，它都会将您带到该链接。

有没有办法做到这一点？我可以通过 icky 内联 JavaScript 作为绝对的最后手段来做到这一点，但是自从发现 jQuery 之后，我非常喜欢能够干净且不显眼地做到这一点的想法 :-)

【问题讨论】：

标签： jquery hyperlink html-table click

【解决方案1】：

假设它是一个“正常”链接（不是 Javascript 触发器），这就足够了：

$("tr").click(function() {
  window.location.href = $(this).find("a").attr("href");
});

您可能希望以某种方式将此行为传达给用户。最小的方法是在将光标悬停在行上时更改光标。

【讨论】：

这太好了，谢谢cletus！我将使用它，但还会为不同的状态添加几个不同的类，并在悬停时在它们之间切换 - 按照您的建议更改背景颜色和光标。
此解决方案（以及我发现的所有其他解决方案）的问题在于，您假设该行上的所有点击都应在浏览器中加载链接位置。右键单击呢？或 cmd/ctrl+点击？这些本身不会导致这种行为......

【解决方案2】：

我发现这个解决方案对我很有效。

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
        return;
        }
        alert('works');
});

【讨论】：

【解决方案3】：

如果您在表格中有另一个链接，例如删除链接，您可能希望使用事件对象来检查用户是否点击了该特定链接并避免重定向。

示例 HTML：

<tr title="http://path/to/download">
  <td><img src="img/icons/file_pdf.png"></td>
  <td><a href="/path/to/delete">Delete</a></td>
  <td>(01/03/10)</td>
</tr>

示例 JavaScript：

$("tr").click(function(event) {
  if(event.target.nodeName != "A"){
    window.location.href = $(this).attr("title");
  }
});

通常我的表格有一个带有编辑和删除功能的操作单元格，所以我使用行点击事件来重定向到显示操作。

【讨论】：