Question

只是一个（希望）快速的问题，我有以下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获取href链接的方法，并使其无论您在哪个单击特定表行，它都会将您带到该链接。

有没有办法做到这一点？我可以通过icky内联JavaScript作为绝对的最后手段来做到这一点，但是自从了解jQuery之后我非常喜欢能够干净利落地做到这一点的想法： - ）

Answer 1

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

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

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

Answer 2

我发现这个解决方案适合我。

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

Answer 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");
  }
});

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

用jQuery创建一个表行（tr）可点击（带有一个href链接，然后悬停！？）

3 个答案: