我正在使用Bootstrap,但以下操作无效:
<tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr> </a> </tbody>
作者注一:
请查看下面的其他答案,尤其是那些不使用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如何编写处理程序的内容;
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回调中):
document.ready
$("#container").on('click-row.bs.table', function (e, row, $element) { window.location = $element.data('href'); });
这样做的好处是不会在表排序时重置(这与其他选项一起发生)。
由于window.document.location已过时,因此已过时(或至少已弃用)window.location。
window.document.location
window.location