javascript - 模拟 元素的行为

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 解决方案，不确定表格的灵 active ，但如果可能的话...这里有一个 DEMO我将如何尝试。