<a>单元的模拟行为

Question

我有这样的东西：

<tr><td><a href="...">text</a></td>...</tr>

我需要使用户能够单击整个表行以在该链接上导航。

现在我使用以下代码：

$(function () {
    $('tr').each(function () {
        var tr = $(this);
        if (tr.hasClass('no-row-link')) return;
        var links = $('a', tr);
        if (links.length != 1) return;
        tr.addClass('row-link').click(rowLinkClick);
    });

    function rowLinkClick() {
        var tr = $(this);
        var links = $('a', tr);
        if (links.length != 1) return;
        window.location = links.attr('href');
    }
});

但问题是，这种行为并不是很好。用户可以命令-点击普通链接打开页面的新选项卡，但他不能在这里。用户可以右击普通链接查看链接上下文菜单，但他不能在这里.

唯一能做我想做的事情的方法是迭代抛出表格单元格(th/td)，并将其内容包装在链接中。然后，让这些链接表现为显示:块。这不是非常优雅的解决方案。还有其他解决办法吗？

Answer 1

在您的行上使用数据属性如何？

<tr data-href="yourlinkhere"><!--whatever comes here--></tr>

然后在jQuery中：

$('.table-selector').on('click', 'tr', function(){
    var href = $(this).data('href');

    if (href){
        window.location = href;
    }
});

它看起来很优雅，你不觉得吗？^^

更新：啊，右击行为。kk

tr { position: relative; }
tr a { position: absolute; display: block; width: 100%; height: 30px/*or something*/ }

CSS解决方案，不确定表的灵活性，但如果可能的话.这是一个关于我如何尝试它的演示。

Answer 2

您可以检查e.ctrlKey属性，并相应地使用window.navigate或window.open：

$(function () {
    function rowLinkClick(e) {
        var href = $(this).find('a').attr('href');
        if (href) {
            (e.ctrlKey ? window.open : window.navigate)(href);
        }
    }

    $('tr')
        .not('.no-row-link')
        .has('a')
        .addClass('row-link')
        .click(rowLinkClick);
});

您可以使用CSS显示一个类似链接的鼠标光标：

.row-link {
    cursor: pointer;
}

http://jsfiddle.net/zmr6whjh/2/

我认为右击行显示链接的上下文菜单可能有点多。我不确定有什么明智的办法。