我使用Bootstrap和以下不工作:

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

当前回答

一个非常简单的选择是使用on-click,在我看来,这更正确,因为这分离了视图和控制器,你不需要硬编码URL或其他你需要通过点击完成的事情。 它也适用于Angular的ng-click。

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

例如在这里工作

其他回答

你可以给行一个id,例如。

<tr id=“special”> ... </tr>

然后使用jquery说:

$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})

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

可以使用链接的表行,但不能使用标准的<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"。在这里找到更多的指南。

这里有一个简单的解决办法。

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

前面没有提到的一个解决方案是在一个单元格中使用单个链接,并使用一些CSS来扩展这个链接:

table { border: 1px solid; width: 400px; overflow: hidden; } tr:hover { background: gray; } tr td { border: 1px solid; } tr td:first-child { position:relative; } a:before { content: ''; position:absolute; left: 0; top: 0; bottom: 0; display: block; width: 400px; } <table> <tr> <td><a href="https://google.com">First column</a></td> <td>Second column</td> <td>Third column</td> </tr> <tr> <td><a href="https://stackoverflow.com">First column</a></td> <td>Second column</td> <td>Third column</td> </tr> </table>