我使用Bootstrap和以下不工作:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
我使用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和如何编写处理程序;
使用类而不是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回调(在文档中)。准备回调):
$("#container").on('click-row.bs.table', function (e, row, $element) {
window.location = $element.data('href');
});
这样做的好处是不会在表排序时被重置(这发生在另一个选项中)。
Note
window.document.location是过时的(或至少已弃用)使用window。位置相反。
其他回答
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})
你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
当您开始处理它时,您需要使用JavaScript在HTML之外分配单击处理程序。
这里有一篇文章解释了如何在2020年做到这一点:https://www.robertcooper.me/table-row-links
这篇文章解释了3种可能的解决方案:
使用JavaScript。 用锚定元素包装所有表单元格。 使用<div>元素代替原生HTML表格元素,以使表格行为<a>元素。
本文深入讨论了如何实现每个解决方案(使用到codedependency的链接),还考虑了一些边缘情况,例如如何处理希望在表单元格中添加链接的情况(嵌套<a>元素不是有效的HTML,因此需要解决这个问题)。
正如@gameliela所指出的,找到一种不将整行作为链接的方法也是值得的,因为这将简化许多事情。然而,我确实认为,将整个表行作为一个链接来点击是一种很好的用户体验,因为用户可以方便地单击表上的任何位置来导航到相应的页面。
你可以在tr中使用onclick javascript方法,使其可点击,如果你需要建立你的链接,由于一些细节,你可以在javascript中声明一个函数,并在onclick中调用它,传递一些值。
公认的答案是很好的,但我建议一个小的替代方案,如果您不想在每个tr重复url。 因此,您将url或href放在数据url表中,而不是tr。
<table data-click data-url="href://blah">
<tbody>
<tr id ="2">
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
<tr id ="3">
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
</tbody>
</table
jQuery(document).ready(function($) {
$('[data-click] tbody tr').click(function() {
var url = $(this).closest('table').data("url");
var id = $(this).closest('tr').attr('id');
window.location = url+"?id="+id);
});
});
这也很好,因为您也不需要将单击数据属性添加到每个tr。另一个好处是,我们没有使用类来触发点击,因为类应该只用于样式化。