我使用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>元素。你可以使用display: table样式属性。这里和这里有一些小提琴来演示。
这段代码应该做到这一点:
.table { display: table; } .row { display: table-row; } .cell { display: table-cell; padding: 10px; } .row:hover { background-color: #cccccc; } .cell:hover { background-color: #e5e5e5; } <link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <div role="grid" class="table"> <div role="row" class="row"> <div role="gridcell" class="cell"> 1.1 </div> <div role="gridcell" class="cell"> 1.2 </div> <div role="gridcell" class="cell"> 1.3 </div> </div> <a role="row" class="row" href="#"> <div role="gridcell" class="cell"> 2.1 </div> <div role="gridcell" class="cell"> 2.2 </div> <div role="gridcell" class="cell"> 2.3 </div> </a> </div>
注意,需要ARIA角色来确保适当的可访问性,因为没有使用标准<table>元素。如果适用,您可能需要添加其他角色,如role="columnheader"。在这里找到更多的指南。
其他回答
你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
当您开始处理它时,您需要使用JavaScript在HTML之外分配单击处理程序。
一个更灵活的解决方案是使用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解决方案,请随意添加。
公认的答案是很好的,但我建议一个小的替代方案,如果您不想在每个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。另一个好处是,我们没有使用类来触发点击,因为类应该只用于样式化。
另一种选择使用<a>, CSS位置和一些jQuery或JS:
HTML:
<table>
<tr>
<td>
<span>1</span>
<a href="#" class="rowLink"></a>
</td>
<td><span>2</span></td>
</tr>
</table>
CSS:
table tr td:first-child {
position: relative;
}
a.rowLink {
position: absolute;
top: 0; left: 0;
height: 30px;
}
a.rowLink:hover {
background-color: #0679a6;
opacity: 0.1;
}
然后你需要给一个宽度,使用例如jQuery:
$(function () {
var $table = $('table');
$links = $table.find('a.rowLink');
$(window).resize(function () {
$links.width($table.width());
});
$(window).trigger('resize');
});
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})