html - 在标签中包装 HTML 表格行

Answer 1

2021 年编辑：
现在似乎有更好的选择，它们更语义化，对屏幕阅读器更友好。查看例如Jans 解决方案。

原始答案：
作为每个 td 中的链接不是一个好的选择，使用 js 有点脏，这是另一种 html/css 方法：

HTML：

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS：

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

Answer 2

它呈现这样是因为浏览器尊重 W3C 规范并且只允许<tr>标签作为<table>.

作为一种解决方案，您可以在每个指向相同 URL的<a>标签内放置一个标签： <td>

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

或者您可以将onClick处理程序绑定到<tr>with JavaScript。一个 jQuery 示例是这样的：

$('table tr').click(function() {
    window.location = 'http://location/here';
});

或者，更好的是，使用委托事件（jQuery 1.7+）：

$('table').on('click', 'tr', function() {
    window.location = 'http://location/here';
});

Answer 3

另一个简单的、纯 CSS 的解决方案是<a>变成块元素

<tr>
  <td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>    
</tr>
<tr>
  <td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>    
</tr>

CSS 将是：

td > a {
  display: block;
}

然后<a>将占用整个<td>, 并且如果为一行中的每个单元格重复链接，则无需 JS 就可以点击整行。

https://jsfiddle.net/evwa451n/

Answer 4

thead具有除 之外的任何元素tbody或tfoot作为 a 的直接子元素是无效的 HTML table，并且这些元素仅tr作为其有效子元素。

任何其他内容必须在 a 内td或th才有效。

您所看到的是浏览器重组您的 DOM 以使其尽可能有效。依赖这种行为的问题在于不同的浏览器以不同的方式做出反应。

如果您需要tr进行交互（以及点击这些元素以引导某处/做某事），您应该使用 JavaScript。

但是，简短的回答，是的，你可以这样做，但这样做是无效的，所以请不要这样做。

但是，对于交互式表格行，一种解决方案（在纯 JavaScript 中）：

var rows = document.getElementsByTagName('tr'),
    url;

for (var i=0,len=rows.length; i<len; i++){
    rows[i].onclick = function(){
        uri = this.getAttribute('data-url');
        window.location = uri;
    };
}

JS 小提琴演示。

（显然，这要求tr元素有一个data-url属性来指定它们应该链接到的位置。）

Answer 5

You could use onclick, so you can get the content dynamically

<td onclick="window.location='http://www.google.com';" style='cursor: pointer;'>Hello</td>

http://jsfiddle.net/ankJw/

Answer 6

新奇的解决方案：有趣的是，到 2021 年，对于带有链接的表格行仍然没有干净的解决方案——我建议您改用显示网格。使用repeat(YOUR_COLUMN_COUNT, minmax(0, auto))forgrid-template-columns使网格的行为与表格非常相似 - 您可以自动调整大小和调整列。此外，您可以使用锚标签，甚至创建一个粘性标题而不会发疯：

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, auto));">
  <div>Header column 1</div>
  <div>Header column 2 (Any content size works)</div>
  <div>Header column 3</div>
  <a href="https://example.com" style="display: contents;">
    <div>Every column adjusts dynamically</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </a>
  <a href="https://example.com" style="display: contents;">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </a>
  <a href="https://example.com" style="display: contents;">
    <div>Content 1</div>
    <div>Works like a table!</div>
    <div>Content 3</div>
  </a>
</div>

更新：不幸的是，除非使用 javascript 动态插入表行（参见下面的示例），否则下面的原始解决方案不起作用。当通过 javascript 插入新元素时，浏览器会跳过语法检查，这样就可以让锚标记留在表格中并防止浏览器将它们移到外面。

let tbody = document.getElementById("myTBody");

for (let i = 0; i < 2; i++) {
  let anchor = document.createElement("a");

  anchor.setAttribute("style", "display: contents;");
  anchor.setAttribute("href", "https://example.com");

  let row = document.createElement("tr");

  let col1 = document.createElement("td");
  let col2 = document.createElement("td");
  col1.append(document.createTextNode("Column 1"));
  col2.append(document.createTextNode("My longer Column 2"));

  row.appendChild(col1);
  row.appendChild(col2);

  anchor.appendChild(row);
  tbody.appendChild(anchor);
}

<p>This table doesnt work with anchors around the rows:</p>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <a href="https://example.com" style="display: contents !important;">
      <tr>
        <td>Column 1</td>
        <td>My longer Column 2</td>
      </tr>
    </a>
    <a href="https://example.com" style="display: contents !important">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
  </tbody>
</table>
<p>This table does work with anchors around the rows:</p>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody id="myTBody">
    <!-- Rows get inserted by javascript -->
  </tbody>
</table>

原文：你也可以使用display: contents;. 这会导致 a 标签子项的行为就像它们是 a 标签父项的子项一样。

在您的 HTML 中：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
  </tbody>
</table>

大多数情况下，不同浏览器的支持应该足够了（请参阅https://caniuse.com/#feat=css-display-contents）。

Answer 7

为什么你不想在点击事件tr？不可能有你想要的锚标签，所以你可以制作点击事件并添加额外的 CSS 使其看起来像锚。

查询：

$("table tr").click(function() {
    window.location = "http://www.google.com/";
});

Answer 8

除了其他人之外，我必须补充一点，我个人更喜欢这样做

<tr onclick="window.location='http://www.google.com';" >
  <td>Text...</td>
</tr>

在ASP.NET MVC的情况下，这样做

<tr onclick="window.location = '@Url.RouteUrl("Product", new { SeName = @product.SeName })';">

Answer 9

此处提供的解决方案对我有帮助，但我认为使用 window.location 不是一个好方法，因为用户无法执行 ctrl+click、在另一个选项卡中打开或查看 url 的去向。我正在构建这个页面，我喜欢在不点击它的情况下看到构建的 url，chrome 会在悬停时显示这个。我无法克服这一点，所以我决定使用上面的@Bojangles 建议来用链接包装每个 td。

首先，按照其他人的建议，将 data-href 添加到每个 tr。

然后，通过 js 将每个 td 包装在一个链接中：

    jQuery(document).ready(function ($) {
        //wrap each td's contents with a hyperlink targeting the data-href 
        $('*[data-href]').children("td").wrapInner(function () {
            return "<a href='" + this.parentElement.attributes["data-href"].value + "'></a>";
        });
    });

可选地，使用 css 使超链接用完所有单元格

    table tr a {
        display:block; /*the link occupies the whole cell, so it's all clickable*/
    }