Clickable rows in seperate HTML file to open different links in a new tab

Question

I am using jQuery and got several rows in a table located in a separate HTML file. Each row is redirecting to a local HTML file successfully when clicked on. (using window.location)

What I am trying to achieve

What I would like to accomplish instead is when I click the row the local HTML file is opening in a new tab and not the current one.

I am aware this would be considered easy to achieve if this was an <a> anchor.

My problem

window.open does not work in this specific case (at least the way I tried it) and applying target="_blank" would be useless as this is not an <a> tag. It's a table row.

What I've tried

jQuery:

jQuery(document).ready(function($) {
  $(".clickable-row").click(function() {
  window.open = $(this).data("href");
  });
});

Seperate HTML file:

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>thead1</th>
        <th>thead2</th>
        <th>thead3</th>
        <th>thead4</th>
        <th>thead5</th>
        <th>thead6</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clickable-row" data-href="\path\index.html">
        <td>tcell1</td>
        <td>tcell2</td>
        <td>tcell3</td>
        <td>tcell4</td>
        <td>tcell5</td>
        <td>tcell6</td>
      </tr>
      <tr class="clickable-row" data-href="\path\differentindex.html">
        <td>tcell1</td>
        <td>tcell2</td>
        <td>tcell3</td>
        <td>tcell4</td>
        <td>tcell5</td>
        <td>tcell6</td>
      </tr>
    </tbody>
  </table>
</div>

To get an overview of my DOM structure I am referring to the separate HTML file with an includeHTML function.

Sources I've read

I'm assuming I cannot use window.open the way I've tried after reading up on how the object works.

And I've read the difference between .open and .location here. However, I am not quite sure when to use what.

might be able to get some ideas from here: https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript — Pete, Sep 13 '18 at 08:38
can you try to put the html directly in the parent file and not included as a separate one? — Lelio Faieta, Sep 13 '18 at 08:39
@Pete I tried what you suggested at first, but that just opens `link/[object%20Object]`. Every solution in the link you've provided assumes you got an anchor tag and not a table row which is my case. — Sanguinary, Sep 13 '18 at 08:42
@LelioFaieta My table is huge and constantly expanding. Pasting my tables into the main HTML instead would make it really difficult to navigate and is not what I want at all. — Sanguinary, Sep 13 '18 at 08:44
you can try by adding just a few lines and see if the `name='_blank'` attribute works in that case. It's just for testing your issue. — Lelio Faieta, Sep 13 '18 at 08:46
@Sanguinary one of the options in the answers was to create an anchor when the click was done and then do a click on the created anchor (it doesn't have to be added to the dom) - see the bottom of this answer: https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript#answer-28374344 — Pete, Sep 13 '18 at 08:46
@Pete This seems to work if I only got 1 static link. Correct me if I am wrong, but would it even work for table rows with several different links? — Sanguinary, Sep 13 '18 at 09:01
I don't see why not - you would just need to create a new link for each row — Pete, Sep 13 '18 at 09:02
@Pete Would that be the most efficient way if I e.g got 100 rows? — Sanguinary, Sep 13 '18 at 09:03

saumil_ · Answer 1 · 2018-09-13T08:53:39.767

1

Have you tried this?

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

Or you can create anchor tag and make click event

$("body").append('<a id="link" href="your url" target="blank">&nbsp;</a>');

$('#link')[0].click();

$( ".clickable-row" ).each(function(index) {
$(this).on("click", function(){
   window.open($(this).data("href"),'_blank'); 
});});

edited Sep 13 '18 at 08:53

answered Sep 13 '18 at 08:36

saumil_

304
2
11

Already tried and did not seem to work. And link is not the same. Each row has a different link. – Sanguinary Sep 13 '18 at 08:37
Mentioning once again that my link is not static. Using `href="your_url"` would work if I only had 1 link. But I got several. – Sanguinary Sep 13 '18 at 08:48
i have used your code in plunker and it works fine, please see https://jsfiddle.net/fkwhvvhk/124/ – saumil_ Sep 13 '18 at 08:48
This does not work for me. It will not respond and nothing happens. Can this be due to me having it in a seperate HTML file? – Sanguinary Sep 13 '18 at 08:53
You have to write loop logic in jquery please refer edited answer, may it works – saumil_ Sep 13 '18 at 08:54
Appreciate your help! However unfortunaterly once again, this did not work. Are you sure `target="_blank"` can be applied to table rows? – Sanguinary Sep 13 '18 at 08:59
yes and also it works in the plunker example, will you please tell me what happen to your screen or else please check your console is there any error? – saumil_ Sep 13 '18 at 09:02

score 1 · Accepted Answer · answered Sep 13 '18 at 08:43

1

try this

jQuery(document).ready(function($) {
      $(".clickable-row").click(function() {
           window.open($(this).data("href"),'_blank');
      });
    });

answered Sep 13 '18 at 08:43

tdayi

142
5

Clickable rows in seperate HTML file to open different links in a new tab

2 Answers2