作者注一:
请查看下面的其他答案,尤其是那些不使用 jquery 的答案。
作者注二:
为后代保留,但肯定wrong2020 年的方法。(即使在 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
以及如何编写处理程序;
使用的优点class over 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');
});
这样做的优点是在表排序时不会重置(其他选项会发生这种情况)。
Note
自从这篇文章发布以来window.document.location
已过时(或至少已弃用)window.location
反而。