我使用Bootstrap和以下不工作:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

当前回答

一个更灵活的解决方案是使用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解决方案,请随意添加。

其他回答

一个更灵活的解决方案是使用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解决方案,请随意添加。

你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:

<tr onclick="window.location='#';">
   ...
</tr>

为指针视图添加样式

[data-href] { cursor: pointer; }

当您开始处理它时,您需要使用JavaScript在HTML之外分配单击处理程序。

这里有一个通用的方法。定义这个css:

// css
td a.linker {
    color:#212529;
    display: block;
    padding: 16px;
    text-decoration: none;
}

然后把这个放在每个td里:

<td>
  <a class="linker" href="www.google.com"> 
    Cell content goes here 
  </a>
</td>

你可以在tr中使用onclick javascript方法,使其可点击,如果你需要建立你的链接,由于一些细节,你可以在javascript中声明一个函数,并在onclick中调用它,传递一些值。

还有另一种方法……

HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});