How to open new tab using data-href

Question

I am making a table row clickable but once clicked I want to open a new tab. I tried using data-target but that didn't work.

<tr class="table-row" data-href="mypage.php" data-target="_blank"></tr>

<script type="text/javascript">
    $(document).ready(function ($) {
        $(".table-row").click(function () {
            window.document.location = $(this).data("href");
        });
    });
</script>

have a look at this post and check out the accepted answer - http://stackoverflow.com/questions/10245279/wrapping-html-table-rows-in-a-tags Is that something you'd be able to implement? — HisPowerLevelIsOver9000, May 08 '17 at 18:43
Maybe this can help you http://stackoverflow.com/questions/36020130/difference-between-href-and-data-href-in-anchor-tag-in-html — b2ok, May 08 '17 at 18:47
@caramba, cool. What do you do though when you have more than one in the ? — Iggy's Pop, May 08 '17 at 18:51
@Jonathan then you add the link inside every `` or you do something with javascript it depends on a few things and there is a ton of responses for that: http://stackoverflow.com/a/1461009/2008111 , http://stackoverflow.com/a/4904983/2008111 , http://stackoverflow.com/a/17147973/2008111 after your update also have a look at this answer: http://stackoverflow.com/a/5141926/2008111 — caramba, May 08 '17 at 18:58

Mi-Creativity · Accepted Answer · 2017-05-08T19:36:10.560

could be done like this:

jQuery: JSFiddle 1

$('.table-row').each(function() {
  var $th = $(this);
  $th.on('click', function() {
    window.open($th.attr('data-href'), $th.attr('data-target'));
  });
});

Pure JS: JSFiddle 2

var tableRows = document.getElementsByClassName('table-row');

for (var i = 0, ln = tableRows.length; i < ln; i++) {
  tableRows[i].addEventListener('click', function() {
    window.open(this.getAttribute('data-href'), this.getAttribute('data-target'));
  });
}

Aiwass 418 · Answer 2 · 2017-05-08T19:16:13.697

2

This should work. It will open new tab;

HTML

  <table>
        <tr class="table-row" data-href="mypage.php" data-target="_blank">
          <td>something</td>
        </tr>
    </table>

JavaScript

  $(document).ready(function ($) {
    $(".table-row").click(function () {
        window.open($(this).data("href"), $(this).data("target")); // Open new tab line
    });
});

edited May 08 '17 at 19:16

answered May 08 '17 at 19:07

Aiwass 418

193
2
7

I still don't see that having to specify a url twice is a good way to go? – Iggy's Pop May 08 '17 at 19:12
repalced url with window.location.href. But i see it works fine without it too. – Aiwass 418 May 08 '17 at 19:18

score 0 · Answer 3 · edited May 08 '17 at 19:11

0

Have you tried:

<tr class="table-row" 
onclick="window.open('http://website-name.com/mypage.php', '_blank');">

edited May 08 '17 at 19:11

izk

234
6
19

answered May 08 '17 at 18:47

Aiwass 418

193
2
7

This opens a new tab as I want but the initial page then redirects to mysite.com/undefined – Iggy's Pop May 08 '17 at 18:55
add this: window.open('http://wbsite-name.com/mypage.php', '_blank'); after window.document.location = $(this).data("href"); - it should redirect and then open empty tab. – Aiwass 418 May 08 '17 at 18:59
But then I am specifying a url twice as I already have the url in the data-href? – Iggy's Pop May 08 '17 at 19:03

Mils · Answer 4 · 2017-05-08T19:18:21.633

0

In this case you need to use windows.open and you can use _blank

<tr class="table-row" data-href="mypage.php">


$(document).ready(function ($) {
  $(".table-row").click(function () {
    var url = $(this).data("href");
    window.open(url,'_blank');
  });
});

edited May 08 '17 at 19:18

answered May 08 '17 at 18:50

Mils

1,479
3
19
42

Thank you. If I do that and click on the link it takes me to mysite.com/undefined – Iggy's Pop May 08 '17 at 18:52
Sorry, I see it was doing that because I had some javascript. I removed that javascript and now nothing happens at all when I click on the link. I will post the jQuery in my original question. – Iggy's Pop May 08 '17 at 18:57

How to open new tab using data-href

4 Answers4

Linked