我使用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>
当前回答
一个非常简单的选择是使用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>
例如在这里工作
其他回答
可以使用链接的表行,但不能使用标准的<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:
下面是上面例子背后的HTML:
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><a href="apples">Edit</a></td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td><a href="bananas">Edit</a></td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td><a href="oranges">Edit</a></td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
CSS
而CSS:
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
jQuery
最后是jQuery,它使魔术发生:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
它所做的是,当单击一行时,搜索属于锚的href。如果找到一个,则将窗口的位置设置为该href。
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})
下面是一种将透明的a元素放在表行的方法。优点是:
是一个真正的链接元素:在悬停时改变指针,在状态栏中显示目标链接,可以用键盘导航,可以在新选项卡或窗口中打开,URL可以复制等 表看起来和没有添加链接时一样 表代码本身没有变化
缺点:
A元素的大小必须在脚本中设置,无论是在创建时还是在它覆盖的行大小发生任何变化之后(否则,它可以完全不使用JavaScript完成,如果表的大小也在HTML或CSS中设置,这仍然是可能的)。
该表保持不变:
<table id="tab1">
<tbody>
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
添加链接(为每一行)通过jQuery JavaScript插入一个A元素到每个第一列,并设置所需的属性:
// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();
$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
$(this).css('position', 'relative');// debug: .css('background-color', '#f11');
// insert the <A> element
var myA=$('<A>');
$(this).append(myA);
var myheight=$(this).height();
myA.css({//"border":'1px solid #2dd', border for debug only
'display': 'block',
'left': '0',
'top': '0',
'position': 'absolute'
})
.attr('href','the link here')
.width(mywidth)
.height(myheight)
;
});
如果使用了许多填充和边距,宽度和高度的设置可能会很棘手,但通常情况下,几个像素的偏差应该是无关紧要的。
现场演示在这里:http://jsfiddle.net/qo0dx0oo/(工作在Firefox,但不是IE或Chrome,那里的链接定位错误)
修复了Chrome和IE(仍然适用于FF): http://jsfiddle.net/qo0dx0oo/2/
我知道有人已经写了差不多一样的,但我的方式是正确的方式(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;}