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

Question

我使用的是Bootstrap,以下操作不起作用：

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

Answer 1

您可以在每个中包含一个锚点，如下所示：

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

然后可以在锚点上使用display:block；使整行可单击。

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

这里的示例jsFiddle。

除非使用JavaScript，否则这可能是最优的。

Answer 2

你不能那么做。它是无效的HTML。不能在和之间放置。请尝试以下操作：

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

为指针视图添加样式

[data-href] { cursor: pointer; }

当您着手处理时，您希望使用JavaScript在HTML之外分配click处理程序。

Answer 3

请看下面的其他答案，特别是没有使用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或者切换位置，你可以在click处理程序函数中做任何你喜欢的事情。阅读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>

代码库也不会改变。相同的处理程序将处理所有行。

您可以像这样使用引导jQuery回调（在document.ready回调中）：

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

这样做的优点是在表排序时不会被重置（另一个选项会发生这种情况）。

由于发布了Window.Document.Location已过时（或至少已不推荐使用），请改用Window.Location。