Question

是否可以将整个表格行包装在<a>标签中？我希望整行成为可点击的链接。

如果我尝试以下操作，链接将在表格的上方和外部呈现：

：此：

<table>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
</table>

渲染如下：

<a href="value_url"></a>
<a href="value_url"></a>
<table>
<tr><td>value</td><td>value</td></tr>
<tr><td>value</td><td>value</td></tr>
</table>

Answer 1

它之所以呈现，是因为浏览器尊重W3C规范，只允许<tr>标记作为<table>的直接后代。

作为一种解决方案，您可以在每个 <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>

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

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

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

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

Answer 2

作为每个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 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以外的任何元素作为table的直接子项，并且这些元素只有tr，这是无效的HTML } 他们的有效的孩子。

任何其他内容必须位于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 Fiddle demo

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

Answer 5

为什么您不想在tr上制作点击事件？不可能像你想要的那样拥有锚标签，这样你就可以制作点击事件并添加aditional CSS，使其看起来像锚。

<强> Jquery的：

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

Answer 6

您可以使用onclick，以便动态获取内容

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

http://jsfiddle.net/ankJw/

Answer 7

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

<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 8

您也可以使用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 9

此处提供的解决方案对我有所帮助，但我认为使用window.location不是一个好方法，因为用户无法按ctrl键并单击，在另一个选项卡中打开或查看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*/
    }

在<a> tags</a>中包装HTML表格行

9 个答案: