我可以在没有Java脚本的情况下进行TR点击吗？

问题描述：

我目前有一个java脚本解决方案，使整个表格行可点击。我需要支持非Java脚本的人，所以这可能没有Java脚本？我可以在没有Java脚本的情况下进行TR点击吗？

我可以为每个单元格添加一个href标签，但这看起来像是过度杀伤，它也只允许用户单击单元格的内容。

将整个表格行变成超链接的其他选择？

你绝对必须使用'table'吗？现在，由于各种原因，表格有些不受欢迎。 – 2012-01-10 17:13:30

@Mike表格可以很好地用于表格数据。 – grapefrukt 2012-01-10 17:16:01

是的，但是，如果海报使用表格进行布局或表格数据，我不清楚。我想我会问，因为只要不使用表格就可以很容易地解决问题。 – 2012-01-10 17:22:40

答

不幸的是，在每个单元格内都没有链接，否则它不是有效的标记。

你仍然可以使它看起来像“行”是可点击的，但通过使链接显示为块，以便它们占据整个单元格。

例如（jsFiddle）

<table> 
    <tr> 
     <td><a href="#">Some text</a></td> 
     <td><a href="#">more text</a></td> 
     <td><a href="#">more text</a></td> 
    </tr> 
</table> 

tr:hover { background: #ddd; } 
td { border: 1px solid #000; border-collapse: collapse; } 
td a { display: block; padding: 5px 20px; }

显示块将工作。这是推荐的方式还是应该不使用表格？ – Paul 2012-01-10 17:34:01

@Paul如果你正在显示表格数据，你应该只使用表格。如果它是表格数据，那么我的答案是要走的路。如果它不是表格数据，那么你应该使用表以外的其他东西。 – 2012-01-10 17:43:40

答

各种浏览器可能允许或不允许你用href包装整个TR，但即使浏览器支持这一点，它也是无效的（X）HTML，并且结果会因浏览器而异不可靠的方式（更新可能会改变行为）。

你最好的选择是使用JS，或者在每个单元格内放置一个href。

答

我意识到这是一个古老的线程与丰富的答案完全合法的解决方案。然而，还有一种方法可以在没有javascript的情况下执行此操作，并且不会重复您的链接*列的数量并保持您的标记/ CSS有效。我花了一段时间才弄清楚，所以我想我会把它发布到其他地方，就像我一样，最终发生在这个线程上。

连结放在第一列：

<table class="search_results"> 
    <tr> 
     <td><a href="#">Some text</a></td> 
     <td>more text</td> 
     <td>more text</td> 
    </tr> 
</table>

这是完全正常的标记，所以你唯一的真正的问题是如何链接到你的跨越表格的宽度。我做了这样的使用相当标准的CSS：

table.search_results a {position:absolute;display:block;width:98%;}

改变宽度为任何你想要的，原则上你已经完成和撒粉。所有这些都是相对容易的，但是如果你像我一样有一个流畅的响应式布局，还有一些标准的链接样式和你的表格上的填充，你将需要这些规则（从上面复制并添加额外）。

table.search_results td:first-child {padding:0;} 
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;} 
table.search_results a:hover {background:none;} 
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

解释道：第一条规则中删除我的第一次ONLY TD的所有填充。默认情况下，我的td上的填充是.5em。第二条规则在链接上添加相同的填充，否则最终会导致单元格内容未对齐。它还纠正了我的一些标准样式，以确保列全部看起来相同。你也可以这样做（将链接样式添加到你的td中）。在最后两条规则中，我摆脱了链接上的默认悬停效果，然后将它放在具有正确类的任何表的tr上。

这适用于我关心的浏览器，但你当然应该在那些你关心的人那里测试:)希望我能帮助保存某人几分钟的时间！

我可以在没有Java脚本的情况下进行TR点击吗？

相关推荐