右键单击表格行无法使用点击功能

Question

我有一个表格，并且有以下代码来查找a href，使整行可点击：

$(document).ready( function() {

        $('table tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
});

然而，有一个问题，就是我的右键点击没有像普通a href链接那样提供“在新标签页中打开链接”选项和窗口等内容。

使用div而不是表格不是一个选项。

如何解决？

是否有任何jQuery插件可以为我解决这个问题？

我的表格看起来像这样（它更大，有更多的td，但仅用于说明）：

<table>
    <tr>
         <td>
             <a href="http://example.com">Some link</a>
             <span>Bla bla bla</span>
         </td>
         <td>
             <span>Some text</span>
         </td>
    </tr>
    <tr>
         <td>
             <a href="http://someotherlink.com">Some link</a>
             <span>Other text</span>
         </td>
         <td>
             <span>Something else</span>
         </td>
    </tr>
    <tr>
         ...
    </tr>
</table>

编辑：我需要自动抓取a href值，就像我的当前代码一样：

$(this).find("a").attr("href");

编辑2：我需要整个tr都可以点击（作为一个块）。使用上述方法是可行的。但是，无法单击行并选择“在新标签页中打开链接”。只有当我悬停在a href上方时才有此选项。但我也希望它出现在整个行上。因此，如果用户想要使用中键或右键单击并从上下文菜单中选择“在新标签页中打开”，他可以这样做。目前还不可能实现。

- Derfder

---

您的意思是希望右键链接选项（如“在新标签页中打开链接”）适用于整个表格行吗？ - nnnnnn

@Derfder 显而易见的解决方案是将行中的每一列都设置为链接。您可以根据需要自定义它们的样式。 - Strelok

请验证我的解决方案。我认为这是最适合您的选择。 - Mihai Matei

Answer 1

为什么不试试这样做：

JS：

$(document).ready(function(){
    $("table tr").mousedown(function(e){

        document.oncontextmenu = function() {return false;}; 

        e.preventDefault();

        var href = $(this).find("a").attr("href");
        if( e.button == 2 ) {
            $(this).find('td:first').prepend('<div class="blank"><a href="' + href + '" target="_blank">Open in new window</a></div>').find('.blank').css('left',e.pageX + 'px').css('top',e.pageY + 'px').fadeIn(400);

        } else if(e.button === 0) {
            if(href) { 
                window.location = href;
            }
        } 
    });

    $(document).on('click','.blank a',function(){ 
        $(this).parent().fadeOut(400,function() { 
            $(this).remove(); 
        }); 
    }).on('mouseleave','.blank',function(){  
        $(this).fadeOut(400, function(){ 
            $(this).remove();     
        });     
    }); 

});

CSS（层叠样式表）：

.blank {
    display:block;
    padding:4px;
    background:#c3c3c3;
    position:absolute;
}

table tr td {
    overflow:visible;
    position:relative;
}

table tr {
    cursor:pointer;
}

这是一个jsfiddle示例，但请注意我没有对外观进行样式化，而且javascript代码必须更新以适应左按钮点击。

- Mihai Matei

---

是的，我认为这是唯一的处理方法。 - Derfder

旧帖子，我只是想感谢大家。我一直在使用.click时遇到问题，所以我转而使用$().on('click'等方式 - 一切都正常了...谢谢！ - TimSPQR

Answer 2

试试这个

    $('tr th, tr td').wrapInner('<a href="http://example.com"></a>').children('a').click(function() {
   var href = $(this).attr("href"); if(href) { window.location = href; }
});

//如果有任何委托问题，请尝试以下操作

    $('tr th, tr td').wrapInner('<a class="links" href="http://example.com"></a>');
$('body').delegate('a.links','click',function(e){
e.preventDefault();

   var href = $(this).attr("href"); if(href) { window.location = href; }
});

- coolguy

---

它是否符合HTML5标准？顺便说一下，我需要它自动获取href值，如：var href = $(this).find("a").attr("href"); 如果href存在，则跳转到该链接。 - Derfder

жҳҜзҡ„пјҢе®ғжҳҜжңүж•Ҳзҡ„HTML5пјҢжӮЁйңҖиҰҒжӣҙж”№жӮЁзҡ„д»Јз Ғдёәvar href = $(this).attr("href");if(href) {window.location = href;}并жӣҝжҚўжҲ‘зҡ„alertж¶ҲжҒҜгҖӮ - coolguy

好的，我现在会尝试并在10分钟内让您知道它是否有效 ;) - Derfder

谢谢，但是你的代码会使得所有的链接都指向example.com，甚至连span也变成了链接:(。我不想要那样。我只需要tr可点击。这是通过该方法实现的。在我原始的帖子中有提到。然而，如果我想要在行上点击并选择“在新标签页中打开链接”，这是不可能的。这个选项只有当我将鼠标悬停在a href上时才可用，但是我希望它也能应用在整行上。所以，如果用户想要使用中间鼠标按钮或右键点击并选择“在新标签页中打开”来打开多个新标签页，他可以做到。现在这是不可能的。 - Derfder

@Derfder - 你可以像ubercooluk建议的那样将所有内容包装在锚点中，但是然后样式化这些锚点，使其看起来像普通文本（并从选项卡顺序中删除它们）。我认为没有办法使锚点的右键菜单出现在其他元素上。 - nnnnnn