我使用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之外分配单击处理程序。
其他回答
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>
为什么我们不应该使用“div”标签....
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>
这里有一个通用的方法。定义这个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>
一个更灵活的解决方案是使用data-href属性来定位任何对象。这样你就可以在不同的地方轻松地重用代码。
<tbody>
<tr data-href="https://google.com">
<td>Col 1</td>
<td>Col 2</td>
</tr>
</tbody>
然后在你的jQuery中,只需瞄准具有该属性的任何元素:
jQuery(document).ready(function($) {
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
});
不要忘记样式你的css:
[data-href] {
cursor: pointer;
}
现在,您可以将data-href属性添加到任何元素,它都可以工作。当我写这样的片段时,我希望它们是灵活的。如果你有一个香草的js解决方案,请随意添加。
我知道有人已经写了差不多一样的,但我的方式是正确的方式(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;}