小编典典

如何使表格中的整行可单击为链接?

all

我正在使用 Bootstrap,但以下不起作用:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>拢158,000</td>
        </tr>
    </a>
</tbody>

阅读 112

收藏
2022-03-10

共1个答案

小编典典

作者注一:

请查看下面的其他答案,尤其是不使用 jquery 的答案。

作者注二:

为后代保留,但在 2020 年肯定是 错误 的方法。(即使在 2017 年也不是惯用的)

原始答案

您正在使用 Bootstrap,这意味着您正在使用 jQuery :^),因此一种方法是:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>拢158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

当然,您不必使用 href 或切换位置,您可以在点击处理函数中做任何您喜欢的事情。继续阅读jQuery以及如何编写处理程序;

使用 而不是 id 的优点是您可以将解决方案应用于多行:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>拢158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>拢800,000</td>
    </tr>
</tbody>

并且您的代码库不会改变。同一个处理程序将处理所有行。

另外一个选择

您可以像这样使用 Bootstrap jQuery 回调(在document.ready回调中):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

这具有在表排序时不会被重置的优点(在另一个选项中会发生)。


笔记

由于已发布此window.document.location内容已过时(或至少已弃用),请window.location改用。

2022-03-10