如何将整个<tr>
视为可点击。
在小提琴中,所有元素(如文本和图像)都是可点击的,但我想让整个<tr>
可点击。我不想做jQuery查询操作,因为它在悬停时不会显示href图标。
我该怎么做?
我读了这个question但它仍然在点击事件上使用了jQuery,它在悬停时不会显示href图标
这是我的HTML
<table border=1>
<tbody>
<tr>
<td style="display: none;">
13467.36232877521
</td>
<td style="display: none;">
0
</td>
<td width="5%" >
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/store/profile/1458470633N4IjGniw81.png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
</a>
</td>
<td width="25%">
<div class="semibold">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation Demo 1
</a>
</div>
<div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
</td>
<td width="35%">
<div class="text-muted">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation, 9th Avenue, New York, NY, United States
</a>
</div>
</td>
<td width="35%" class="text-right">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/tip/1456942351fQoyY8DNZd.png" alt="image" height="36px" width="40px" />
</a>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分:4)
上述组合应该可以解决问题。
1.为您的元素添加可识别的类。
<tr class="clickable" data-href="http://website/your_href"></tr>
2.为要显示可点击的元素写入CSS。
.clickable {
cursor: pointer;
}
3.使用Javascript:
点击可点击的东西var elements = document.getElementsByClassName('clickable');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('click', function() {
var href = this.dataset.href;
if (href) {
window.location.assign(href);
}
}
}
答案 1 :(得分:1)
答案 2 :(得分:0)
您需要做的就是添加游标:指针;如果你想真正使整个tr标签可点击,让它看起来像它的可点击,然后添加一个ID。 IE:
<tr id="clickable">
CSS
tr { cursor: pointer; }
答案 3 :(得分:0)
您可以使用javascript来完成。也许:
$("tr").click(function() {
// what to do
});