我使用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>
当前回答
这里有一个简单的解决办法。
<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
其他回答
我知道有人已经写了差不多一样的,但我的方式是正确的方式(div不能是A的子),也最好使用类。
您可以使用CSS模拟一个表,并将a元素作为行
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
您可以将按钮角色添加到表行中,Bootstrap将在不更改css的情况下更改游标。我决定使用这个角色作为一种方法,用很少的代码轻松地使任何行都可以单击。
Html
<table class="table table-striped table-hover">
<tbody>
<tr role="button" data-href="#">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
jQuery
$(function(){
$(".table").on("click", "tr[role=\"button\"]", function (e) {
window.location = $(this).data("href");
});
});
您可以应用相同的原则将按钮角色添加到任何标记。
这里有一个简单的解决办法。
<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
作者注一:
请看看下面的其他答案,特别是那些不使用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。位置相反。
为什么我们不应该使用“div”标签....
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>