公认的答案是很好的，但我建议一个小的替代方案，如果您不想在每个tr重复url。 因此，您将url或href放在数据url表中，而不是tr。

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

这也很好，因为您也不需要将单击数据属性添加到每个tr。另一个好处是，我们没有使用类来触发点击，因为类应该只用于样式化。

你可以在每个<td>中包含一个锚，如下所示:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

然后你可以使用display:block;使整行可单击。

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

这里是jsFiddle的例子。

这可能是最优的，除非使用JavaScript。

使用标准Bootstrap 4.3+实现如下-没有jQuery或任何额外的css类需要!

关键是在单元格中的文本上使用拉伸链接，并将<tr>定义为包含块。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover"> <tbody> <tr style="transform: rotate(0);"> <th scope="row"><a href="#" class="stretched-link">1</a></th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

你可以用不同的方式定义包含块，例如将transform设置为非none值(如上面的例子)。

要了解更多信息，请阅读这里的伸缩链接引导文档。

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

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

为指针视图添加样式

[data-href] { cursor: pointer; }

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

作者注一:

请看看下面的其他答案，特别是那些不使用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。位置相反。

这里有一个通用的方法。定义这个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>