打开新选项卡onclick table row - plugin

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打开新选项卡onclick table row - plugin相关的知识,希望对你有一定的参考价值。

我使用插件,所以当我点击表格行时,它会转到该网址。现在这工作正常,但我希望它作为一个新标签打开。我知道“window.open('urlhere','_ blank');”将网址打开到新标签但我无法弄清楚应该放在哪里。有谁知道这个插件的使用方式或经验?

我使用的插件:https://github.com/DeOldSax/clickable-tr-jquery

插件代码:

   (function ( $ ) {

var disableClickClass = 'disable-row-click';
var defaults = {};
var settings;

$.fn.clickableTable = function( options ) {
    settings = $.extend( defaults, options);

    var rows = this.find('tr[data-href], tr[data-event]');

    rows.css("cursor", "pointer");
    rows.find("td." + disableClickClass).css("cursor", "default");

    addClickEvent(rows);

    return this;
};

function addClickEvent(rows) {
    rows.click(function(e) {
        if (notClickable(e)) {
            return;
        }

        var dataEvent = $(this).data("event");
        if ( dataEvent ) {
            if (settings && settings[dataEvent]) {
               settings[dataEvent].call( this, e );
            } else {
                var fun = window[dataEvent];
                if ( typeof fun === "function" ) {
                    fun.call( this, e );
                }
            }
        }

        var dataHref = $(this).data("href");
        if ( dataHref ) {
            var isRemote = $(this).data("remote");

            var id = "uniquy-id-id";
            var aTag = buildATag(id, dataHref, isRemote);
            document.getElementById(id).click();
            aTag.remove();
        }
    });
}

function notClickable(e) {
    var target = $(e.target);
    return e.target.localName == 'a' ||
        e.target.localName == 'button' ||
        target.hasClass(disableClickClass) ||
        target.closest('td').hasClass(disableClickClass);
}

function buildATag(id, dataHref, isRemote) {
    var a = $('<a></a>');
    a.css('display', 'none');
    a.attr('data-remote', isRemote);
    a.attr('href', dataHref);
    a.attr('id', id);
    a.insertAfter($("body"));
    return a;
}

}( jQuery ));
答案

只需使用此代码:jsFiddle

$("tr").click(function(){
    var $href = $(this).data("href");
    window.open($href,'_blank');
});

排除最后一个td元素:jsFiddle

$("tr").click(function(){
    var $href = $(this).data("href");
    window.open($href,'_blank');
});
$("tr > td:last-child").click(function(event){
    event.stopPropagation();
});

以上是关于打开新选项卡onclick table row - plugin的主要内容,如果未能解决你的问题,请参考以下文章

捕获“在新选项卡中打开链接”和“在新窗口中打开链接”事件

如何使用ctrl +单击阻止javascript阻止打开新选项卡

使用 JavaScript 打开链接新窗口(不是选项卡)而不输入两次 URL? [复制]

jQuery onclick 事件为打开视图页面添加动态选项卡

Magento 在 onclick 链接上的产品详细信息页面上打开描述选项卡

表行 onclick - 更改页面,或打开新标签