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><ahref="/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:

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