我使用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>
当前回答
你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
当您开始处理它时,您需要使用JavaScript在HTML之外分配单击处理程序。
其他回答
你可以在tr中使用onclick javascript方法,使其可点击,如果你需要建立你的链接,由于一些细节,你可以在javascript中声明一个函数,并在onclick中调用它,传递一些值。
一个非常简单的选择是使用on-click,在我看来,这更正确,因为这分离了视图和控制器,你不需要硬编码URL或其他你需要通过点击完成的事情。 它也适用于Angular的ng-click。
<table>
<tr onclick="myFunction(this)">
<td>Click to show rowIndex</td>
</tr>
</table>
<script>
function myFunction(x) {
alert("Row index is: " + x.rowIndex);
}
</script>
例如在这里工作
公认的答案是很好的,但我建议一个小的替代方案,如果您不想在每个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。另一个好处是,我们没有使用类来触发点击,因为类应该只用于样式化。
这里有一个通用的方法。定义这个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>
2023年的答案: 你可以在行中添加addEventListener:
var rows = document.getElementsByTagName('table')[0].rows; Array.from(rows).forEach(row => { row.addEventListener("click", function() { console.log(this.getAttribute('data-href')); // window.location.href = this.getAttribute('data-href'); }); }); body { display: flex; justify-content: center; margin-top: 20px; color: #37559d; } a { color: #5165ff; } table { border-collapse: collapse; } tr:hover { background: #f2f3ff; outline: none; cursor: pointer; } td { border: 2px solid #ccd2ff; position: relative; padding: 18px; } <table> <tbody> <tr data-href="https://www.google.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link1">Link</a> </td> </tr> <tr data-href="https://www.amazon.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link2">Link</a> </td> </tr> <tr data-href="https://www.stackoverflow.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link3">Link</a> </td> </tr> </tbody> </table>