【发布时间】：2010-11-30 11:08:14
【问题描述】：
我无法将我的表格行设置为指向某些内容的链接。我只能使用 css 和 html。我尝试了从 div in row 到另一个不同的东西，但仍然无法使其工作。
【问题讨论】：
标签： html css hyperlink html-table
【发布时间】：2010-11-30 11:08:14
【问题描述】：
我知道这个问题已经得到解答，但我仍然不喜欢此页面上的任何解决方案。对于使用 JQuery 的人，我制定了一个最终解决方案，使您能够为表格行提供与 <a> 标记几乎相同的行为。
这是我的解决方案：
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;
}
});
HTML 现在您可以在 HTML 中的任何 <tr> 元素上使用它
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
【讨论】：
-
如此接近纯js。
document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } }); -
vanilla js没有的2014年，你宠坏了小子;P。
谢谢你。您可以通过将 CSS 类分配给如下行来更改悬停图标：
<tr class="pointer" onclick="document.location = 'links.html';">
CSS 看起来像：
<style>
.pointer { cursor: pointer; }
</style>
【讨论】：
当我想模拟带有链接但尊重 html 标准的 <tr> 时，我会这样做。
HTML：
<table>
<tr class="trLink">
<td>
<a href="#">Something</a>
</td>
</tr>
</table>
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*/
}
这样，当有人用鼠标在 TR 上移动时，所有行（和这个链接）都获得了悬停样式，他看不到有多个链接。
希望可以帮助某人。
小提琴HERE
【讨论】：
我有另一种方法。特别是如果您需要使用 jQuery 发布数据
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable 在 SESSIONS 中设置变量，您将要访问的页面可以读取和操作。
我真的很想要一种直接发布到窗口位置的方法，但我认为这是不可能的。
【讨论】：
在阅读了这个帖子和其他一些帖子后，我在 javascript 中提出了以下解决方案：
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
要使用它，请将 href 放在您希望可点击的 tr/td/th 中，例如：<tr href="http://stackoverflow.com">。
并确保在创建 tr 元素后执行上述脚本（通过其放置或使用事件处理程序）。
缺点是它不会完全让 TR 表现得像带有 编辑：我做了键盘导航通过设置 onkeydown、role 和 tabIndex 工作，如果只需要鼠标，您可以删除该部分。但是，它们不会在悬停时在状态栏中显示 URL。display: table; 的 div 那样的链接，并且它们不会是键盘可选择的或有状态文本。
您可以使用“tr[href]”CSS 选择器专门设置链接 TR 的样式。
【讨论】：
我给自己做了一个自定义的 jquery 函数：
HTML
<tr data-href="site.com/whatever">
jQuery
>$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
对我来说简单而完美。希望对您有所帮助。
（我知道 OP 只需要 CSS 和 HTML，但考虑使用 jQuery）
编辑
同意 Matt Kantor 使用数据属性。上面的编辑答案
【讨论】：
-
其实很优雅。我想知道它是否被 w3c 标准视为无效的 html。
-
我会使用
data-href或类似的。 -
JSFiddle 链接导致 404。
-
将类添加到
<table class='tr_link' >并在css 中将其提供给.tr_link{cursor:pointer}以获得最佳使用效果。 -
要在悬停时添加手部效果，请将
tr[data-href] { cursor: pointer }添加到您的样式表中
sirwilliam 的回答最适合我。我改进了 Javascript，支持热键 Ctrl + LeftClick（在新选项卡中打开页面）。事件 ctrlKey 被 PC 使用，metaKey 被 Mac 使用。
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;
}
});
示例
【讨论】：
-
好。 Ctrl + LeftClick 不会破坏 UIX
-
仍然丢失'右键单击->在新标签中打开'或'在新窗口中打开'
您有两种方法可以做到这一点：
-
使用javascript：
<tr onclick="document.location = 'links.html';"> -
使用锚点：
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
我使用以下方法制作了第二个作品：
table tr td a {
display:block;
height:100%;
width:100%;
}
要消除列之间的死区：
table tr td {
padding-left: 0;
padding-right: 0;
}
这里是第二个例子的简单演示：DEMO
【讨论】：
-
由于 OP 说“只有 css 和 html”，我认为接受是第二个答案。请注意，如果您没有border=0，则表格单元格之间会出现“缺失链接”间隙。
-
IIRC 表格单元格只需折叠，但可以有边框。
-
我建议使用“display:inline-block”而不是块。通过块显示，我发现 Chrome 忽略了“height:100%”，并且如果同一行中还有其他具有更大高度的项目，则实际上并没有使
的整个高度可点击。使其 inline-block 解决了该问题，以及文本在表格元素中被剪切的可能相关问题。 Anchors 列之间仍有死区（使用 Google Chrome 版本 40.0.2214.115 m 测试）
这样您就不必在 tr 中复制链接 - 只需将其从第一个 a 中取出。
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
【讨论】：
如果您必须使用表格，您可以在每个表格单元格中放置一个链接：
<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>
并使链接填满整个单元格：
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
如果您能够使用<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>
这是 <div> 方法的 CSS：
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
【讨论】：
-
如果要显示表格数据，总是使用表格。使用 div 和 span 的集合在语义上是不正确的，如果您丢失了 CSS，会使您的内容难以阅读，并且对于使用屏幕阅读器的人来说是无法访问的。
如果您使用的浏览器支持它，您可以使用 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>
当然，您不能将块元素放在<a> 中。
您也不能将其与常规 <table> 混合使用
【讨论】：
-
好主意，谢谢！它似乎适用于 Opera 8.5/、Firefox 0.8/、IE8、iPhone Simulator/Safari/非常旧 :)
-
这应该是开发人员尝试采用的技术，因为当前所有浏览器都支持 CSS 表格：caniuse.com/#feat=css-table 唯一的问题是我不能在 Bootstrap 中使用它！ :'(
您不能用<a> 标记包装<td> 元素，但您可以通过使用onclick 事件调用函数来完成类似的功能。找到了一个例子here，类似这个函数：
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
然后像这样将它添加到您的表中：
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
【讨论】：
-
使用 onClick 实现这种目的的一个问题是用户不能再使用鼠标中键或控制单击在新选项卡中打开链接（这对于那些我们喜欢以这种方式打开链接）。另一方面，没有理由通过创建一个只执行一个简单命令的函数来使事情复杂化。如果您要这样做，只需将“document.location.href=...”直接放在 onclick 属性中即可。
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
也许是这样的？虽然它确实使用了 JS，但这是使行 (tr) 可点击的唯一方法。
除非您有一个带有填充整个单元格的锚标记的单元格。
然后，无论如何，您都不应该使用表格。
【讨论】：
通常的方法是将一些 JavaScript 分配给 TR 元素的 onClick 属性。
如果你不会使用JavaScript，那么你必须使用一个技巧：
为同一行的每个
TD添加相同的链接（该链接必须是单元格中最外层的元素）。将链接变成块元素：
a { display: block; width: 100%; height: 100%; }
后者将强制链接填充整个单元格，因此单击任意位置都会调用该链接。
【讨论】：
你可以在行中添加一个 A 标记吗？
<tr><td>
<a href="./link.htm"></a>
</td></tr>
这是你要问的吗？
【讨论】：
-
不，我需要点击所有行区域。