用 <a> 标签包装 HTML 表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10245279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapping HTML table rows in <a> tags
提问by Yarin
Is it possible to wrap entire table rows in <a>tags? I want the the entire row to be a clickable link.
是否可以将整个表格行包装在<a>标签中？我希望整行都是可点击的链接。
If I try the following, the links get rendered above and outside the table:
如果我尝试以下操作，链接会在表格的上方和外部呈现：
This:
这个：
<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>
Renders like this:
渲染成这样：
<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>
采纳答案by N4ppeL
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
由于每个 td 中的链接不是一个好的选择，并且使用 js 有点脏，这是另一种 html/css 方法：
HTML:
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:
CSS：
.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }
回答by Bojangles
It renders like that because the browser is respecting the W3C specification and only allowing <tr>tags as direct descendents of <table>.
它呈现这样是因为浏览器尊重 W3C 规范并且只允许<tr>标签作为<table>.
As a solution, you could either put an <a>tag inside each<td>that points to the same URL:
作为解决方案，您可以<a>在每个标签中放置一个<td>指向相同 URL的标签：
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
Or you could bind an onClickhandler to the <tr>with JavaScript. A jQuery example would be this:
或者您可以使用 JavaScript将onClick处理程序绑定到<tr>。一个 jQuery 示例是这样的：
$('table tr').click(function() {
window.location = 'http://location/here';
});
Or, even better, use delegated events (jQuery 1.7+):
或者，更好的是，使用委托事件（jQuery 1.7+）：
$('table').on('click', 'tr', function() {
window.location = 'http://location/here';
});
回答by Weslie Leung
Another simple, CSS only solution is turning <a>into block elements
另一个简单的、只有 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>
The CSS would be:
CSS 将是：
td > a {
display: block;
}
Then the <a>would take up the entire <td>, and making entire row clickable without JS if the link is repeated for each cell in a row.
然后<a>将占据整个<td>, 并且如果对行中的每个单元格重复链接，则无需 JS 即可使整行可点击。
回答by David says reinstate Monica
It's invalid HTML to have any elements other than thead,tbodyor tfootas a direct child of a table, and those elements have only tras theirvalid children.
这是无效的HTML有比其他任何元素thead，tbody或tfoot作为一个直接的孩子table，以及这些因素都只是tr为自己的合法子女。
Any other content must be inside of a tdor thto be valid.
任何其他内容都必须在 atd或内部th才能有效。
What you're seeing is the browser restructuring your DOM so that it's as valid as it can be. The problem with relying on that behaviour though is that different browsers react in different ways.
您所看到的是浏览器重构了您的 DOM，使其尽可能有效。依赖这种行为的问题在于不同的浏览器以不同的方式做出反应。
If you need a trto be interactive (and for clicks on those elements to lead somewhere/do something) you should use JavaScript.
如果您需要具有tr交互性（以及点击这些元素以引导某处/做某事），您应该使用 JavaScript。
But, short answer, yes you cando it, but it's not valid to do so, so please don't.
但是，简短的回答，是的，您可以这样做，但这样做是无效的，所以请不要这样做。
For interactive table rows, though, one solution (in plain 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;
};
}
(Which, obviously, requires that the trelements have a data-urlattribute to specify where they should link to.)
（显然，这要求tr元素有一个data-url属性来指定它们应该链接到的位置。）
回答by Chuck Norris
Why you don't want to make click event on tr? It's not possible to have anchor tag like you want so you can make click event and add aditional CSS for making it to look like anchor.
为什么你不想点击事件tr？不可能有您想要的锚标记，因此您可以创建单击事件并添加额外的 CSS 以使其看起来像锚。
Jquery:
查询：
$("table tr").click(function() {
window.location = "http://www.google.com/";
});
回答by Chuck Norris
You could use onclick, so you can get the content dynamically
您可以使用onclick，以便您可以动态获取内容
<td onclick="window.location='http://www.google.com';" style='cursor: pointer;'>Hello</td>
回答by Developer
Just in additional to others I have to add that I personnaly prefer to do like this
除了其他人之外，我必须补充一点，我个人更喜欢这样做
<tr onclick="window.location='http://www.google.com';" >
<td>Text...</td>
</tr>
in case of ASP.NET MVCdo it like
在ASP.NET MVC 的情况下这样做
<tr onclick="window.location = '@Url.RouteUrl("Product", new { SeName = @product.SeName })';">
回答by Jan
You could also use display: contents;. This causes the a tags childs to behave like they are a child of the a tags parent.
您也可以使用display: contents;. 这会导致 a 标签子项的行为就像它们是 a 标签父项的子项。
In your HTML:
在您的 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>
Support in different browsers should be enough most of the times (see https://caniuse.com/#feat=css-display-contents).
大多数情况下，不同浏览器的支持应该足够了（请参阅https://caniuse.com/#feat=css-display-contents）。
回答by Miguel Hughes
The solutions provided here helped me, but I don't think that using window.location is a good approach because user cannot do ctrl+click, open in another tab, or see where the url is going to. I'm building this page and I like to see the url built without clicking it, and chrome shows this on hover. I could not get over this, so I decided to use @Bojangles suggestion above to wrap each td with a link.
此处提供的解决方案对我有所帮助，但我认为使用 window.location 不是一个好方法，因为用户无法按 ctrl+click、在另一个选项卡中打开或查看 url 的去向。我正在构建这个页面，我喜欢在不点击它的情况下看到构建的 url，并且 chrome 在悬停时显示这个。我无法克服这一点，所以我决定使用上面的@Bojangles 建议来用链接包装每个 td。
First, add the data-href to each tr, as others suggested.
首先，按照其他人的建议，将 data-href 添加到每个 tr。
Then, wrap each td in a link via js:
然后，通过 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>";
});
});
optionally, use css to make the hyperlink use up all of the cell
可选地，使用 css 使超链接用完所有单元格
table tr a {
display:block; /*the link occupies the whole cell, so it's all clickable*/
}
