Question

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

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

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">

Answer 1

window.open进行救援。

使用

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

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

Answer 2

尝试使用window.open而不是window.loction

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

Answer 3

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

Answer 4

jQuery代码段期望HTML在<tr>中的任意位置包含链接，如下所示：

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

此外，请改用window.open()，因为这将使用户确定单击是否应转到另一个窗口或选项卡。

Answer 5

使用延伸链接使用引导程序4，使表行可单击非常简单。拉伸链接填充了容器所在的具有相对位置的整个空间，并且由于表自然没有相对位置，因此我们必须将此作为类（带有引导程序）添加到Table行中。 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>

HMTL表行链接在新选项卡中打开

5 个答案: