像<a></a>一样行事

Question

我有一张桌子，我希望每一行都可以点击。现在，我做的很简单：

$('tr').click(...)

这在很大程度上起作用，但我怎样才能使它像这样的链接：

• 按住Shift键单击可在新窗口中打开目标
• 中间点击会在新标签页中打开目标
• 悬停显示状态栏中的链接地址

Answer 1

这在某些浏览器中技术上是可行的，但不是全部，对于那些支持它的人来说，这是很多工作。您必须拦截键盘和非左键单击事件。将常规A标记中的每个TD的内容包装起来可能会更好。

走JS /覆盖路线也不会优雅地降级......如果你所做的只是真正只是链接到另一个页面，就像典型的HREF那样，那依赖于JavaScript几乎是愚蠢的。

Answer 2

一个选项是实现.mouseUp（）并手动检测shift和ctrl键，以及按下了哪个按钮。当然，这听起来容易出现各种丑陋的失败，其中你会错过一些个人用户设置的怪癖。

相反，如何自动将<a>标记添加到您想要的每个单元格。在jQuery中，这只是：

$('tr th, tr td').wrapInner('<a href="..."></a>').children('a').click(function() {
    ...
});

Answer 3

我建议在每个单元格中使用<a>标记：

<table>
<tr>
  <td><a href="...">...</a></td>
  <td><a href="...">...</a></td>
  <td><a href="...">...</a></td>
</tr>
</table>

使用这个CSS：

table.clickRows td > a {
  display: block;
  width: 100%;
  height: 100%;
}

Answer 4

我认为您需要通过将其实际封装在＆lt; a＆gt;中来使其成为链接。标记，因此'hovering'将在状态栏中显示链接地址。

右键和中键的行为肯定取决于浏览器配置。

Answer 5

最好不要让<a>看起来像<tr>。

浏览器会更好地容忍你修改<a>元素的表示，而不是覆盖转换点击链接等基本操作。

Answer 6

值得一提的是，Apple是RED，香蕉是YELLOW。你可能不想挤出它并为那些理智的用户着色。

锚标记<a>存在其价值，表格行标记<tr>也是如此。