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 () { $('#ord

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

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

Solution 3:

Try to use window.open instead of window.loction

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

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

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