我使用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>
当前回答
<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属性。
其他回答
你可以在每个<td>中包含一个锚,如下所示:
<tr>
<td><a href="#">Blah Blah</a></td>
<td><a href="#">1234567</a></td>
<td><a href="#">more text</a></td>
</tr>
然后你可以使用display:block;使整行可单击。
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
这里是jsFiddle的例子。
这可能是最优的,除非使用JavaScript。
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})
这里有一个简单的解决办法。
<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
还有另一种方法……
HTML:
<table>
<tbody>
<tr class='clickableRow'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
jQuery:
$(function() {
$(".clickableRow").on("click", function() {
location.href="http://google.com";
});
});
你可以使用这个bootstrap组件:
http://jasny.github.io/bootstrap/javascript/#rowlink
贾斯尼引导
您最喜欢的前端框架缺少的组件。
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
</thead>
<tbody data-link="row" class="rowlink">
<tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
</tbody>
</table>
使用
通过数据属性
向<table>或<tbody>元素添加类.rowlink和属性data-link="row"。对于其他选项,将名称附加到data-,如data-target="a. "可以通过将.rowlink-skip类添加到<td>. mainlink中来排除单元格。
通过JavaScript
通过javascript调用输入掩码:
$('tbody.rowlink').rowlink()