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

作者注一:

请看看下面的其他答案，特别是那些不使用jquery的答案。

作者注二:

为子孙后代保留下来，但在2020年肯定是错误的做法。(早在2017年就不是惯用用法了)

原来的答案

你正在使用Bootstrap，这意味着你正在使用jQuery:^)，所以一种方法是:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

当然你不必使用href或切换位置，你可以在点击处理函数中做任何你喜欢的事情。阅读jQuery和如何编写处理程序;

使用类而不是id的优点是你可以将解决方案应用到多行:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

并且您的代码基础不会改变。相同的处理程序将处理所有行。

另一个选择

您可以像这样使用Bootstrap jQuery回调(在文档中)。准备回调):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

这样做的好处是不会在表排序时被重置(这发生在另一个选项中)。

Note

window.document.location是过时的(或至少已弃用)使用window。位置相反。

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

下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接，而不是按照该链接进行操作。

HTML:

下面是上面例子背后的HTML:

    <table id="example">
    <tr>
     <th>&nbsp;</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。

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

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

为指针视图添加样式

[data-href] { cursor: pointer; }

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

为什么我们不应该使用“div”标签....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>