我使用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>
当前回答
<table>
<tr tabindex="0" onmousedown="window.location='#';">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
将#替换为url, tabindex="0"使任何元素都可聚焦
其他回答
你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
当您开始处理它时,您需要使用JavaScript在HTML之外分配单击处理程序。
您可以将按钮角色添加到表行中,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");
});
});
您可以应用相同的原则将按钮角色添加到任何标记。
<tbody>
<tr data-href='www.bbc.co.uk'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
<tr data-href='www.google.com'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
<script>
jQuery(document).ready(function ($) {
$('[data-href]').click(function () {
window.location = $(this).data("href");
});
});
</script>
虽然这里的主要解决方案很棒,但我的解决方案消除了对类的需求。您所需要做的就是添加包含URL的data-href属性。
下面是一种将透明的a元素放在表行的方法。优点是:
是一个真正的链接元素:在悬停时改变指针,在状态栏中显示目标链接,可以用键盘导航,可以在新选项卡或窗口中打开,URL可以复制等 表看起来和没有添加链接时一样 表代码本身没有变化
缺点:
A元素的大小必须在脚本中设置,无论是在创建时还是在它覆盖的行大小发生任何变化之后(否则,它可以完全不使用JavaScript完成,如果表的大小也在HTML或CSS中设置,这仍然是可能的)。
该表保持不变:
<table id="tab1">
<tbody>
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
添加链接(为每一行)通过jQuery JavaScript插入一个A元素到每个第一列,并设置所需的属性:
// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();
$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
$(this).css('position', 'relative');// debug: .css('background-color', '#f11');
// insert the <A> element
var myA=$('<A>');
$(this).append(myA);
var myheight=$(this).height();
myA.css({//"border":'1px solid #2dd', border for debug only
'display': 'block',
'left': '0',
'top': '0',
'position': 'absolute'
})
.attr('href','the link here')
.width(mywidth)
.height(myheight)
;
});
如果使用了许多填充和边距,宽度和高度的设置可能会很棘手,但通常情况下,几个像素的偏差应该是无关紧要的。
现场演示在这里:http://jsfiddle.net/qo0dx0oo/(工作在Firefox,但不是IE或Chrome,那里的链接定位错误)
修复了Chrome和IE(仍然适用于FF): http://jsfiddle.net/qo0dx0oo/2/
使用标准Bootstrap 4.3+实现如下-没有jQuery或任何额外的css类需要!
关键是在单元格中的文本上使用拉伸链接,并将<tr>定义为包含块。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover"> <tbody> <tr style="transform: rotate(0);"> <th scope="row"><a href="#" class="stretched-link">1</a></th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
你可以用不同的方式定义包含块,例如将transform设置为非none值(如上面的例子)。
要了解更多信息,请阅读这里的伸缩链接引导文档。