【问题标题】:Open new tab onclick table row - plugin打开新选项卡 onclick 表格行 - 插件
【发布时间】:2018-03-06 13:25:32
【问题描述】:

我使用了一个插件,所以当我点击表格行时,它会转到该网址。现在这工作正常,但我希望它作为新标签打开。我知道“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 ));

【问题讨论】:

  • 您可以在设置中添加回调: EventName : callback - 尝试使用 e.preventDefault 并返回 false。还要添加 window.open('urlhere','_blank');在返回 false 之前。
  • 为什么你会使用一些随机库来处理你的点击事件?无法理解。

标签: javascript jquery jquery-plugins


【解决方案1】:

只需使用此代码: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 中排除最后一个 。所以我使用了这个插件,它有一个 disable-row-click 类。
  • 哦,等一下
  • 你几乎可以工作,但在最后一个 td 中有一个图标可以打开一个引导模式,现在不再打开了。
  • 这个怎么样..现在你只需选择 td:$("tr &gt; td:not(:last-child)").click(function(){ var $href = $(this).parent().data("href"); window.open($href,'_blank'); });
  • 是的,谢谢。不再需要那个插件了。
猜你喜欢
相关资源
最近更新 更多
热门标签