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>

Answer 1

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'));
  });
}

Answer 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
    });
});