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

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

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

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

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

为指针视图添加样式

[data-href] { cursor: pointer; }

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

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

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

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

然后使用jquery说:

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

你可以使用这个bootstrap组件:

http://jasny.github.io/bootstrap/javascript/#rowlink

贾斯尼引导

您最喜欢的前端框架缺少的组件。

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

使用

通过数据属性

向<table>或<tbody>元素添加类.rowlink和属性data-link="row"。对于其他选项，将名称附加到data-，如data-target="a. "可以通过将.rowlink-skip类添加到<td>. mainlink中来排除单元格。

通过JavaScript

通过javascript调用输入掩码:

$('tbody.rowlink').rowlink()