HTML table row link open in new tab

问题

I'm trying to add link to table row and open new tab when clicked.

Solution below works, but i need to open page in new tab.

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

回答1:

Use window.open, const or let instead of var and proper indentation. Also remove the href and target attributes from the tr HTML tag.

回答2:

window.open to the rescue.

Use

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

add the above lines inside click callback and it will open href link in new tab.

回答3:

Try to use window.open instead of window.loction

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

回答4:

The jQuery snippet expects the HTML to contain a link anywhere in the <tr>, like this:

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

Also, use window.open() instead since this will let the user decide if the click should go to another Window or tab.

回答5:

To make a table row clickable is very straightforward with bootstrap 4 using a stretched link. Stretched links fill the entire space of the container they are in that has a relative position and since tables naturally don't have a relative position, we have to add this as a class (comes with bootstrap) to the Table rows. CSS can be used to further adjust the rows to look anyhow you want. Here is an example code:

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

来源：https://stackoverflow.com/questions/56424015/html-table-row-link-open-in-new-tab