前面没有提到的一个解决方案是在一个单元格中使用单个链接，并使用一些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>

有一个很好的方法可以在<tr>内使用<a>标记，这可能在语义上是不正确的(可能会给你一个浏览器警告)，但不需要JavaScript/jQuery就可以工作:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS:注意这里的技巧是将<a>标记作为最后一个元素，否则它将尝试占用第一个<td>单元格的空间。

PPS:现在你的整个行将是可点击的，你可以使用这个链接在新选项卡中打开(Ctrl/CMD+单击)

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

另一种选择使用<a>， CSS位置和一些jQuery或JS:

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

然后你需要给一个宽度，使用例如jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

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

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

为指针视图添加样式

[data-href] { cursor: pointer; }

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

一个非常简单的选择是使用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>

例如在这里工作