2023年的答案: 你可以在行中添加addEventListener:

var rows = document.getElementsByTagName('table')[0].rows; Array.from(rows).forEach(row => { row.addEventListener("click", function() { console.log(this.getAttribute('data-href')); // window.location.href = this.getAttribute('data-href'); }); }); body { display: flex; justify-content: center; margin-top: 20px; color: #37559d; } a { color: #5165ff; } table { border-collapse: collapse; } tr:hover { background: #f2f3ff; outline: none; cursor: pointer; } td { border: 2px solid #ccd2ff; position: relative; padding: 18px; } <table> <tbody> <tr data-href="https://www.google.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link1">Link</a> </td> </tr> <tr data-href="https://www.amazon.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link2">Link</a> </td> </tr> <tr data-href="https://www.stackoverflow.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link3">Link</a> </td> </tr> </tbody> </table>

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

将#替换为url, tabindex="0"使任何元素都可聚焦

有一个很好的方法可以在<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+单击)

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

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

例如在这里工作

我投入了很多时间来解决这个问题。

有3种方法:

Use JavaScript. The clear drawbacks: it's not possible to open a new tab natively, and when hovering over the row there will be no indication on status bar like regular links have. Accessibility is also a question. Use HTML/CSS only. This means putting <a> nested under each <td>. A simple approach like this fiddle doesn't work - Because the clickable surface is not necessarily equal for each column. This is a serious UX concern. Also, if you need a <button> on the row, it is not valid HTML to nest it under <a> tag (although browsers are ok with that). I've found 3 other ways to implement this approach. First is ok, the other two are not great. a) Have a look on this example: tr { height: 0; } td { height: 0; padding: 0; } /* A hack to overcome differences between Chrome and Firefox */ @-moz-document url-prefix() { td { height: 100%; } } a { display: block; height: 100%; } It works, but due to inconsistencies between Chrome and Firefox it requires browser-specific hack to overcome the differences. Also Chrome will always align the cell content to the top, which can cause problems with long texts, especially if varying line heights are involved. b) Setting <td> to { display: contents; }. This leads to 2 other problems: b1. If someone else tries to style directly the <td> tag, like setting it to { width: 20px; }, we need to pass that style somehow to the <a> tag. We need some magic to do that, probably more magic than in the Javascript alternative. b2. { display: contents; } is still experimental; specifically it's not supported on Edge. c) Setting <td> to { height: --some-fixed-value; }. This is just not flexible enough. The last approach, which I recommend to seriously thinking of, is to not using clickable rows at all. Clickable rows is not a great UX experience: it's not easy to visually mark them as clickable, and it poses challenges when multiple parts are clickable within the rows, like buttons. So a viable alternative could be to have an <a> tag only on the first column, displayed as a regular link, and give it the role of navigating the whole row.