HTML 表格行链接在新选项卡中打开答案

【问题标题】：HTML table row link open in new tabHTML 表格行链接在新选项卡中打开
【发布时间】：2019-10-18 19:28:04
【问题描述】：

我正在尝试添加指向表格行的链接并在单击时打开新标签。

以下解决方案有效，但我需要在新标签中打开页面。

Javascript：

$(document).ready(function () {
    $('#orders-table tr').click(function () {
        var href = $(this).find("a").attr("href");
        if (href) { window.location = href; }
    });
});

HTML：

<tr href="/order?id=[ORDER_ID_LOCAL]" target="_blank">

【问题讨论】：

这是一个带有href 和target 属性的tr 标签吗？您可以编辑您的问题以最好地描述您的使用情况。这样可能会造成混淆。
仅供参考：HTML 不包含 <a>，第 3 行预计 (.find("a"))。

标签： javascript html-table row

【解决方案1】：

使用window.open、const 或let 代替var 和适当的缩进。还要从tr HTML 标记中删除href 和target 属性。

【讨论】：

【解决方案2】：

window.open 来救援。

使用

var href = $(this).find("a").attr("href"); window.open(href, '_blank');

在点击回调中添加以上行，它将在新标签中打开href链接。

【讨论】：

【解决方案3】：

尝试使用 window.open 代替 window.loction

window.open(
  href,
  '_blank' // <- This is what makes it open in a new window.
);

【讨论】：

【解决方案4】：

jQuery sn-p 期望 HTML 在<tr> 的任何位置包含一个链接，如下所示：

<tr>
  <td>
    <a href="/order?id=[ORDER_ID_LOCAL]" target="_blank">Item excerpt</a>
  </td>
</tr>

另外，请改用window.open()，因为这会让用户决定点击是否应该转到另一个窗口或选项卡。

【讨论】：

【解决方案5】：

使用 bootstrap 4 使用拉伸链接使表格行可点击非常简单。拉伸链接填充了它们所在的具有相对位置的容器的整个空间，并且由于表自然没有相对位置，因此我们必须将其作为类（带有引导程序）添加到表行中。 CSS 可用于进一步调整行以使其看起来随心所欲。这是一个示例代码：

<table class="table dataTable my-0">
    <tbody>
        <tr class="position-relative">
            <td>
                <a class="stretched-link" href="#" target="_blank">Name</a>
            </td>
            <td>Office</td>
            <td>Email</td>
            <td>Last Login</td>
        </tr>
    </tbody>
</table>

【讨论】：