如何使表格中的整行都可单击作为链接？

Question

我正在使用Bootstrap，但以下操作无效：

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

Answer 1

作者注一：

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

作者注二：

保留后代，但肯定在2019年采用了 错误的 方法。（在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。