[英]How to make entire <tr> in a table clickable like <a href=“”>
How can I make the entire <tr>
as clickable. 如何使整个
<tr>
都可单击。
In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr>
clickable. 在小提琴中,所有元素(例如文本和图像)都是可单击的,但是我想使整个
<tr>
可单击。 I won't want to make the jQuery query action, as it won't show the href icon while hovering it. 我不想执行jQuery查询操作,因为它在悬停时不会显示href图标。
How can I do this ? 我怎样才能做到这一点 ?
I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it 我读了这个问题,但它仍然在单击事件上使用jQuery,将其悬停时不会显示href图标
Here is my HTML 这是我的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>
A combination of the above should do the trick. 结合以上方法即可解决问题。
1.Add recognizable class to your element. 1.将可识别的类添加到您的元素。
<tr class="clickable" data-href="http://website/your_href"></tr>
2.Write CSS for the element to appear clickable. 2.编写CSS,使元素显示为可点击。
.clickable {
cursor: pointer;
}
3.Make the thing clickable using Javascript: 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);
}
}
}
All you need to do is add cursor: pointer; 您所需要做的就是添加cursor:指针; to have it look like its clickable and then add an ID to it if you want to actually make the entire tr tag clickable.
使其看起来像是可点击的,然后如果要实际使整个tr标签可点击,则为其添加一个ID。 IE:
IE浏览器:
<tr id="clickable">
CSS 的CSS
tr { cursor: pointer; }
You can do it by using javascript. 您可以使用javascript来实现。 Maybe:
也许:
$("tr").click(function() {
// what to do
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.