html - 表格行就像一个链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1460958/
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
html - table row like a link
提问by Max Frai
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
我无法将我的表格行设置为指向某些内容的链接。我只能使用 css 和 html。我尝试了从 div in row 到另一个不同的东西，但仍然无法使其工作。
回答by Esteban Küber
You have two ways to do this:
您有两种方法可以做到这一点：
Using javascript:
<tr onclick="document.location = 'links.html';">Using anchors:
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
使用javascript：
<tr onclick="document.location = 'links.html';">使用锚点：
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
I made the second work using:
我使用以下方法进行了第二项工作：
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
要消除列之间的死区：
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
下面是第二个例子的简单演示：DEMO
回答by Ron van der Heijden
I made myself a custom jquery function:
我给自己做了一个自定义的 jquery 函数：
Html
html
<tr data-href="site.com/whatever">
jQuery
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
对我来说简单而完美。希望对你有帮助。
(I know OP want CSS and HTML only, but consider jQuery)
（我知道 OP 只需要 CSS 和 HTML，但考虑 jQuery）
Edit
编辑
Agreed with Matt Kantor using data attr. Edited answer above
同意 Matt Kantor 使用数据属性。上面编辑了答案
回答by Greg
If you're on a browser that supports it you can use CSS to transform the <a>into a table row:
如果您使用的是支持它的浏览器，则可以使用 CSS 将其<a>转换为表格行：
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
当然，您不能将块元素放在<a>. 你也不能把它和普通的混合在一起<table>
回答by system PAUSE
If you have touse a table, you can put a link into each table cell:
如果您必须使用表格，您可以在每个表格单元格中放置一个链接：
<table>
<tbody>
<tr>
<td><a href="person1.html">John Smith</a></td>
<td><a href="person1.html">123 Fake St</a></td>
<td><a href="person1.html">90210</a></td>
</tr>
<tr>
<td><a href="person2.html">Peter Nguyen</a></td>
<td><a href="person2.html">456 Elm Ave</a></td>
<td><a href="person2.html">90210</a></td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
并使链接填满整个单元格：
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
如果您能够使用<div>s 而不是表格，那么您的 HTML 可以简单得多，并且您不会在表格单元格之间的链接中出现“间隙”：
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div>method:
这是与该<div>方法一起使用的 CSS ：
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
回答by Aaron Digulla
The usual way is to assign some JavaScript to the onClickattribute of the TRelement.
通常的方法是为元素的onClick属性分配一些 JavaScript TR。
If you can't use JavaScript, then you must use a trick:
如果你不会使用 JavaScript，那么你必须使用一个技巧：
Add the same link to each
TDof the same row (the link must be the outermost element in the cell).Turn links into block elements:
a { display: block; width: 100%; height: 100%; }
向每一
TD行添加相同的链接（链接必须是单元格中最外面的元素）。将链接变成块元素：
a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
后者将强制链接填充整个单元格，因此单击任意位置将调用链接。
回答by Donut
You can't wrap a <td>element with an <a>tag, but you can accomplish similar functionality by using the onclickevent to call a function. An example is found here, something like this function:
你不能<td>用<a>标签包装一个元素，但你可以通过使用onclick事件来调用一个函数来完成类似的功能。这里有一个例子，类似于这个函数：
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
并将其添加到您的表中，如下所示：
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
回答by Vlastislav Novák
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKeyis used by PC's, metaKeyby Mac.
Sirwilliam 的回答最适合我。我改进了 Javascript，支持热键 Ctrl + LeftClick（在新选项卡中打开页面）。事件ctrlKey由 PC 和metaKeyMac 使用。
Javascript
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
例子
回答by botenvouwer
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a>tag.
我知道这个问题已经得到回答，但我仍然不喜欢这个页面上的任何解决方案。对于使用 JQuery 的人，我做了一个最终的解决方案，它使您能够为表行提供与<a>标签几乎相同的行为。
This is my solution:
这是我的解决方案：
jQueryYou can add this for example to a standard included javascript file
jQuery例如，您可以将其添加到标准包含的 javascript 文件中
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTMLNow you can use this on any <tr>element inside your HTML
HTML现在您可以<tr>在 HTML 中的任何元素上使用它
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
回答by sara_thepot
When i want simulate a <tr>with a link but respecting the html standards, I do this.
当我想<tr>用链接模拟 a但尊重 html 标准时，我会这样做。
HTML:
HTML：
<table>
<tr class="trLink">
<td>
<a href="#">Something</a>
</td>
</tr>
</table>
CSS:
CSS：
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
这样，当有人将鼠标放在 TR 上时，所有行（和此链接）都会获得悬停样式，而他看不到有多个链接。
Hope can help someone.
希望可以帮助某人。
Fiddle HERE
小提琴这里
回答by Will
This saves you having to duplicate the link in the tr - just fish it out of the first a.
这使您不必复制 tr 中的链接 - 只需将其从第一个 a 中取出即可。
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
