logo标签列表

如何将整个表格行转换为链接，最标准和兼容的方法是什么？

javascripthtmlcsshtml-tableweb-standards
6
显然，你不能只是在 <tr> 标签周围加上一个 <a> 标签就结束了；这是无效的，甚至根本不起作用。我见过使用 JavaScript 的方法，但那么不支持 JavaScript 的浏览器怎么办？最好的方法是什么，可以使整个表格行 <tr> 成为一个链接？
编辑：应 Lerxst 的要求，以下是一个带有一些行的表格示例：
<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>
你能发一下你的表格行的例子吗？ - Greg Olmstead
1
我的个人观点是，尽管大多数人会持不同意见，但我认为应该使用Javascript。不支持Javascript的浏览器和用户非常少，他们错过了互联网的很多东西。另一种可能的方式是使用div重新创建表格框架，并让锚点充当tr（显示块）。 - Kerry Jones
1
老实说，如果不支持JavaScript，现在的互联网也只有一半左右能正常运行。请使用JavaScript - http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable - Brian Roach
非常类似于https://dev59.com/FHNA5IYBdhLWcg3wn_U1。 - Roatin Marth
2
David Dorward的出色回答采用了渐进增强的方法，使整行可点击，而不是武断地认为盲人不配使用互联网。 （@prostynick：我的朋友Doug没有要求失明或在没有JavaScript的情况下浏览） - Stephen P
显示剩余3条评论
5个回答
4

我的建议是将链接放在最合适的单元格中（可能是名称），然后添加一个类似以下的事件处理程序：

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

非JS客户端仍然可以使用常规链接。

更有效的方法是将事件处理程序附加到表格上，并使用事件对象查找具有单击的元素，然后向上爬升到父级行。这可能最好通过像YUI或jQuery这样的库来实现。

1

如果您愿意放弃表格，下面的解决方案是最简单的，不需要JavaScript：

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>
1

没有Javascript支持，你就不能这么做。一个链接就是一个链接，而一个表格行就是一个表格行（也就是说，一个<a>是一个<a>，而一个<tr>是一个<tr>）。表格行和大多数其他标记元素没有“天然”的类似链接的行为。最好的做法是在所有表格单元格中填充带有<a>标签的内容。编辑：请注意，您需要调整样式，使得 <a> 标签被布局以完全填充表格单元格; 也许首先将它们设置为 display:block。

或者您可以使用Javascript。

1
在每个单元格中放置链接的问题在于，非指针用户必须通过多个副本进行制表，这使得体验非常糟糕。 - Quentin
我完全同意。当然，使用键盘进行导航的用户可能也会在Javascript解决方案中遇到困难，除非可能向<tr>添加一些ARIA属性。不过我对此还不是很了解。(哦，看了你的解决方案我明白你的意思了。) - Pointy
0
<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>
表格中只放置链接？我认为这不是一个好主意。 - prostynick
把表格放在<a>标签内是完全无效的HTML写法。（编辑： 在HTML5中除外，但我不知道IE6是否支持它） - Pointy
只是试图为伙伴提供可行的解决方案。他不想要JavaScript示例。 :) @prostynick 这个问题中有一些“我认为这不是一个好主意”的观点。 - Riley
0

LINK

实际上，你可以利用CSS更改颜色以表示链接，创建鼠标悬停和单击事件，并将其重定向到适当的更改，从而使该行看起来像是一个链接。链接解释了如何操作。

如果JS不可用，则备用方案可以在代码中添加a标签链接，这样没有JS的人仍然可以使用包含在行中的链接。因此，您有一个备选选项。

他要求在没有Javascript的情况下完成。 - Pointy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接