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）并将其内容包装在链接上。然后使这些链接表现为display：block。这不是一个非常优雅的解决方案。还有其他解决方案吗？

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解决方案，不确定您的表格的灵活性，但如果可能的话......这是DEMO我将如何尝试。

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/

我认为右键单击该行会显示该链接的上下文菜单可能有点多。我不确定那是一种明智的方法。

模拟<a> element</a>的行为

2 个答案: