表行 onclick - 更改页面，或打开新标签答案

【问题标题】：Table Row onclick - change page, or open new tab表行 onclick - 更改页面，或打开新标签
【发布时间】：2013-06-21 23:53:15
【问题描述】：

我有一个包含行的表格，单击该表格时，会将用户带到一个页面，其中包含有关该行所描述的项目的更详细信息。不幸的是，它总是会更改当前页面，我们的用户希望能够通过鼠标中键/控制单击行，以便在需要时打开新选项卡。此选择适用于普通链接，但似乎不适用于我的 onclick。示例如下：

<html>
    <body>
        <table border='1'>
        <tr onclick='window.open("http://www.google.com")'>
            <td>Open Another Window</td>
        </tr>
        <tr onclick='location.href="http://www.google.com"'>
            <td>Change Current Page</td>
        </tr>
        </table>
    </body>
</html>

使用 onclick 事件模拟普通链接的最佳方法是什么，以便在不同的操作系统/浏览器中行为相同，我相信对于触发在新标签页中打开链接的触发因素有不同的绑定。

【问题讨论】：

如果您的表格行只有一个单元格，为什么要使用表格进行这种布局？这真的是为了显示表格数据吗？无论如何，这是以前问过的。这是一个很好的答案，但弹出窗口阻止会阻止您的标签打开：stackoverflow.com/a/11384018/7569308
该示例只有一个单元格，但我的实际场景没有。我确实有一张数据表要显示。

标签： javascript html onclick href

【解决方案1】：

这对我有用：

<tr onclick="window.open('http://www.google.com','_blank')">

【讨论】：

您的解决方案很好地解决了部分问题，特别是如何在单击一行时打开新页面。 OP 希望他们的用户可以选择：单击在同一页面中打开，右键单击提供在新页面中打开的选项。

【解决方案2】：

使用锚标记代替处理表格行的点击事件。 Ctrl+click 锚点的默认行为是在新窗口或选项卡中打开 href 属性中的 URL。如果您想在没有 Ctrl 按钮的情况下打开新选项卡或窗口，也可以使用锚点的 target 属性。

<td><a href="http://www.google.com" target="_blank">open another window or tab</a></td>

【讨论】：

重点是动作与表格行相关联（这就是我使用'onclick'的原因），而不是单元格或单元格内容。在 td 中创建一个“a href”链接很容易，但是如果用户单击行上的任何位置，我需要一个与之相关的操作。