HTML – 表格像一个链接

我无法将我的表格行设置为链接。 我只能使用CSS和HTML。 我尝试了不同的东西，从行到另一个东西，但仍然无法使其工作。

你有两种方法来做到这一点：

  • 使用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

我做了一个自定义的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使用数据attr。 上面编辑的答案

如果您在支持它的浏览器上，则可以使用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>混合在一起

通常的做法是将一些JavaScript分配给TR元素的onClick属性。

如果你不能使用JavaScript，那么你必须使用一个技巧：

  1. 将同一链接添加到同一行的每个TD （链接必须是单元格中最外面的元素）。

  2. 将链接转换为块元素： a { display: block; width: 100%; height: 100%; } a { display: block; width: 100%; height: 100%; }

后者将强制链接填充整个单元格，所以点击任何地方都会调用链接。

如果你必须使用表格，你可以在每个表格单元格中join一个链接： 

 <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>而不是表格，那么您的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 */ }

您不能用<a>标签包装<td>元素，但是您可以使用onclick事件来调用函数来实现类似的function。 在这里find一个例子，像这个函数： 

 <script type="text/javascript"> function DoNav(url) { document.location.href = url; } </script>

并将其添加到您的表中，如下所示： 

 <tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

来自sirwilliam的回答最适合我。 我改进了支持热键Ctrl + LeftClick的Javascript（在新标签中打开页面）。 事件ctrlKey由PC使用，由Mac使用metaKey 。

使用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; } });

例

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

我知道这个问题已经答案，但我仍然不喜欢在这个页面上的任何解决scheme。 对于使用JQuery的人来说，我做了一个最终的解决scheme，使您可以为表行提供与<a>标签几乎相同的行为。

这是我的解决scheme：

Javascript 你可以添加这个例如一个标准的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> 
 //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）可点击的唯一方法。

除非你有一个带有锚点标记的单元格来填充整个单元格。

然后，你不应该使用表格。

这样可以节省你不得不在tr中复制链接 – 只要把它从第一个中删除就可以了。 

 $(".link-first-found").click(function() { var href; href = $(this).find("a").attr("href"); if (href !== "") { return document.location = href; } });

在阅读这个线程和其他一些人后，我想出了在javascript中的以下解决scheme： 

 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"));

要使用它，把你想要点击的tr / td / th中的href，如： <tr href="http://stackoverflow.com"> 。 并确保上面的脚本是在tr元素创build后（通过它的放置或使用事件处理程序）执行的。

缺点是它不会完全使TRs像divs一样display: table;链接display: table; ，而且它们不能被键盘select或具有状态文本。 编辑：我做了键盘导航工作通过设置onkeydown，angular色和tabIndex，你可以删除该部分，如果只需要鼠标。 他们不会在hover的状态栏中显示url。

您可以使用“tr [href]”CSSselect器专门设置链接TR。

我有另一种方式。 特别是如果你需要使用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"; }); });

设置variables在SESSIONS中设置variables，您将要读取和操作页面。

我真的很喜欢张贴到窗口的位置，但我不认为这是可能的。

当我想模拟一个链接，但尊重的HTML标准，我这样做。

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上使用鼠标时，所有行（以及此链接）都将获得hover样式，并且看不到有多个链接。

希望可以帮助别人。

小提琴在这里

你可以添加一个A标签的行？ 

 <tr><td> <a href="./link.htm"></a> </td></tr>

这是你问的吗？

Interesting Posts