您可以将按钮角色添加到表行中，Bootstrap将在不更改css的情况下更改游标。我决定使用这个角色作为一种方法，用很少的代码轻松地使任何行都可以单击。

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

您可以应用相同的原则将按钮角色添加到任何标记。

作者注一:

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

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

<div>

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

</div>

可以使用链接的表行，但不能使用标准的<table>元素。你可以使用display: table样式属性。这里和这里有一些小提琴来演示。

这段代码应该做到这一点:

.table { display: table; } .row { display: table-row; } .cell { display: table-cell; padding: 10px; } .row:hover { background-color: #cccccc; } .cell:hover { background-color: #e5e5e5; } <link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <div role="grid" class="table"> <div role="row" class="row"> <div role="gridcell" class="cell"> 1.1 </div> <div role="gridcell" class="cell"> 1.2 </div> <div role="gridcell" class="cell"> 1.3 </div> </div> <a role="row" class="row" href="#"> <div role="gridcell" class="cell"> 2.1 </div> <div role="gridcell" class="cell"> 2.2 </div> <div role="gridcell" class="cell"> 2.3 </div> </a> </div>

注意，需要ARIA角色来确保适当的可访问性，因为没有使用标准<table>元素。如果适用，您可能需要添加其他角色，如role="columnheader"。在这里找到更多的指南。

你可以在每个<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。

我更喜欢使用onclick=""属性，因为它很容易使用和理解的新手喜欢

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>