我正在使用 Bootstrap,但以下不起作用:
<tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>拢158,000</td> </tr> </a> </tbody>
请查看下面的其他答案,尤其是不使用 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以及如何编写处理程序;
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