如何使表格中的整个 <tr> 像 <a href=""> 一样可点击

Question

这是我的Fiddle

如何使整个<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>

Answer 1

以上的组合应该可以解决问题。

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);
        }
    }
}

Answer 2

尝试将显示作为块。

td a { 
   display: block; 
}

Fiddle

也可以查看question 中的答案。

Answer 3

你需要做的就是添加 cursor:pointer;让它看起来像它的可点击，然后如果你想让整个 tr 标签可点击，然后添加一个 ID。即：

 <tr id="clickable">

CSS

 tr { cursor: pointer; }

Answer 4

您可以使用 javascript 来实现。也许：

$("tr").click(function() {
    // what to do
});