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

Question

我正在使用 Bootstrap，但以下内容不起作用：

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

原文由 user1038814 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 。

原文由 Ahmed Masud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你不能那样做。它是无效的 HTML。您不能将 <a> 放在 <tbody> 和 <tr> 之间。试试这个：

 <tr onclick="window.location='#';">
   ...
</tr>

为指针视图添加样式

[data-href] { cursor: pointer; }

当您处理它时，您会希望使用 JavaScript 在 HTML 之外分配点击处理程序。

原文由 davidfurber 发布，翻译遵循 CC BY-SA 4.0 许可协议