我使用Bootstrap和以下不工作:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
当前回答
这里有一个通用的方法。定义这个css:
// css
td a.linker {
color:#212529;
display: block;
padding: 16px;
text-decoration: none;
}
然后把这个放在每个td里:
<td>
<a class="linker" href="www.google.com">
Cell content goes here
</a>
</td>
其他回答
你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
当您开始处理它时，您需要使用JavaScript在HTML之外分配单击处理程序。
这里有一个通用的方法。定义这个css:
// css
td a.linker {
color:#212529;
display: block;
padding: 16px;
text-decoration: none;
}
然后把这个放在每个td里:
<td>
<a class="linker" href="www.google.com">
Cell content goes here
</a>
</td>
您可以将按钮角色添加到表行中，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");
});
});
您可以应用相同的原则将按钮角色添加到任何标记。
你可以给行一个id，例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})
使用标准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值(如上面的例子)。
要了解更多信息，请阅读这里的伸缩链接引导文档。
