如何使用data-href打开新选项卡

时间:2017-05-08 18:41:46

标签: javascript jquery html

我正在制作一个可点击的表格行但是一旦点击我想要打开一个新标签。我尝试使用data-target,但这不起作用。

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

4 个答案:

答案 0 :(得分:5)

可以这样做:

jQuery:JSFiddle 1

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

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

答案 1 :(得分:2)

这应该有效。它将打开新标签;

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

答案 2 :(得分:0)

你试过了吗?

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

答案 3 :(得分:0)

在这种情况下,您需要使用windows.open,然后才能使用_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');
  });
});