单击整行（保留中间单击并按住Ctrl键并单击）

时间：2009-05-20 23:32:22

标签： javascript jquery events

我有一个HTML表，第一列中有一个链接。我想允许用户单击行中的任意位置以激活该链接。同时，我想保留打开新标签/窗口的中键和ctrl +单击功能。以下是该表的示例：

<table id="row_link"> 
  <tbody> 
    <tr>
      <td><a href="link1.html">link</a></td> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <td><a href="link2.html">link</a></td> 
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table>

使用jQuery我可以允许用户在一行中的任何地方左键单击：

$("table#row_link tbody tr").click(function () {
    window.location = $(this).find("a:first").attr("href");
});

这当然会禁用打开新选项卡的标准中键单击和ctrl +单击功能。有没有更好的方法允许用户点击整行，同时保留标准的中间点击和ctrl + clcik行为？

10 个答案:

答案 0 :(得分：35)

不幸的是，无法在每个浏览器中模拟链接和所有相关行为。因此，实现所需内容的唯一方法是在<tr>元素周围有一个跟在光标后面的链接;这个链接是不可见的，所以对于用户来说，看起来他们点击了<tr>，但他们实际上是在点击隐藏的链接。使用此方法，中键，ctrl +单击和任何其他行为保持不变！

以下是演示： http://jsbin.com/ufugo

这是代码：

$("table tr").each(function(){

    var $link = $('a:first', this).clone(true),
        dim = {
            x: [
                $(this).offset().left,
                $(this).offset().left + $(this).outerWidth()
            ],
            y: [
                $(this).offset().top,
                $(this).offset().top + $(this).outerHeight()
            ]
        }

    $link
        .click(function(){
            $(this).blur();
        })
        .css({
            position: 'absolute',
            display: 'none',
            // Opacity:0  means it's invisible
            opacity: 0
        })
        .appendTo('body');

    $(this).mouseover(function(){
        $link.show();
    });

    $(document).mousemove(function(e){
        var y = e.pageY,
            x = e.pageX;
        // Check to see if cursor is outside of <tr>
        // If it is then hide the cloned link (display:none;)
        if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {  
            return $link.hide();
        }
        $link.css({
            top: e.pageY - 5,
            left: e.pageX - 5
        })
    });

});

编辑：

我创建了一个jQuery插件，使用了比上面更好的方法： http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

答案 1 :(得分：12)

修改

这是一个简单的问题，有一个简单的解决方案。我认为不需要在某些浏览器上破坏或需要处理时间的讨厌的黑客攻击。特别是因为有一个简洁的CSS解决方案。

首先是demo

受到@Nick solution的启发，提出了一个非常类似的问题，我提出了一个简单的css + jquery解决方案。

首先，这是我写的迷你插件。该插件将使用链接包装每个单元格：

jQuery.fn.linker = function(selector) {
    $(this).each(function() {
        var href = $(selector, this).attr('href');
        if (href) {
            var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
                'text-decoration': 'none',
                'display': 'block',
                'padding': '0px',
                'color': $(this).css('color')
            })
            $(this).children()
                   .css('padding', '0')
                   .wrapInner(link);
        }
    });
};

这是一个用法示例：

$('table.collection tr').linker('a:first');

您需要的所有CSS：

table.collection {
    border-collapse:collapse;
}

就这么简单。

您可以使用事件对象检查鼠标单击类型。这个article正在讨论类似的问题。

无论如何，这是如何做到的：

$("table#row_link tbody tr").click(function () {

    if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
        if (!e.ctrlKey) {
            // Left mouse button was clicked without ctrl
            window.location = $(this).find("a:first").attr("href");
        }
    }
});

答案 2 :(得分：7)

我会从HTML / css方面攻击它。当大多数网站在表格中进行所有布局时，这曾经是一个常见问题。

首先将所有表格单元格的内容转换为链接。如果您不希望它们看起来像链接，您可以使用CSS从“非链接”单元格中删除下划线。但它们将是链接，无论如何它在语义上都是你想要的。

接下来，您希望扩展链接以填充整个单元格。 StackOverflow已经知道answer to this：

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

对于典型的表格，单元格之间没有空格，整个行都是可点击的。而且由于这不依赖于任何技巧或浏览器特定的黑客攻击，它应该可以在任何地方使用。

答案 3 :(得分：6)

你想要这个：

$('table#row_link tbody tr').mousedown( function(e){
    if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
        //middle mouse button or ctrl+click
    } else {
        //normal left click
    }
});

这是在FF3.0.10，Chrome 1.0和IE6中测试的。我使用mousedown事件，因为firefox或IE都没有通过鼠标中键点击到.click（fn）事件。

答案 4 :(得分：1)

您可以抓住该事件并查看它的事件代码。但是没有真正的方法可以知道浏览器对这些事件的行为。

答案 5 :(得分：1)

这是应该工作的东西：我们使用.click（）来模拟元素内部第一个点击，而不是使用window.location。另外，使用条件检查 CTRL +单击。

应该是这样的：

$("table#row_link tbody tr").click(function (e) {
    if(e.ctrlKey) { 
        // Run Ctl+Click Code Here
    } else { 
        $(this).children('a').eq(0).click(); 
    }
}

希望这有帮助！

Dave Romero

答案 6 :(得分：1)

你可以创建一个链接，让它在你的tr中徘徊，接受mouveover事件，更新href和位置

创建一个像素链接

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

更新href和鼠标悬停位置

$("#row_link tr").mouseover(
   function(event){
      //update href
      $("#onepixel").attr("href",$(this).find("a:first").attr("href"));
      //update position, just move to current mouse position
      $("#onepixel").css("top",event.pageY).css("left",event.pageX);
   }
);

答案 7 :(得分：-1)

尝试将td放在td周围，然后应用display：block CSS元素到td。

这应该使得td的整个区域都可以点击，所有按钮都是“普通”链接。

一个例子可能更好：

<table id="row_link"> 
  <tbody> 
    <tr>
      <a href="link1.html"><td style="display: block;">link</td></a> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <a href="link2.html"><td style="display: block;">link</td></a>
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table>

过去类似的方法对我来说很有用，尽管它并不完全适用于表格元素。没有经过测试，请尝试一下。

答案 8 :(得分：-1)

我认为biggerlink plugin会做你要求的。

答案 9 :(得分：-3)

你需要删除＆lt; tbody＆gt;标签

并且只需使用'href'属性来获取链接目标，并且不要选择锚点＆lt; a＆gt;标签也是因为它包含href属性。

$("table#row_link tbody tr a").click(function () {

     window.location = $(this).attr("href");

});

或只是让链接打开一个新标签。

我希望能帮到你。

相关问题
最新问题