Question

我目前正在向我的网站添加非js功能，因为有些设备仍然无法处理js或某些人关闭它以使页面加载速度更快（如慢速连接，旧计算机等慢速设备）。 / p>

所以，现在我遇到了一个问题：我有一个页面，其中的个人资料列在<table>中，并希望每个<tr>都链接到某个个人资料。将链接放在像<td>这样的<tr><td><a>Name</a></td><td><a>Address</a></td></tr>中并不是一个好的解决方案，因为我会有很多代码，只有文字可以点击。

另外

<a><tr><td>Text</td></tr></a>

不起作用。

有没有没有Javascript的解决方案来实现这个目标？

提前致谢 Naymecliff

Answer 1

我担心这是不可能的。您可以将td元素的内容作为链接，通过HTML5规则（以及浏览器练习），可以将整个表格作为链接。但是中间级别，表格行元素tr，无法转换为HTML中的链接。

如果你将每个td的内容设为一个链接，以便一行的单元格指向同一个目的地，那么事情在某种意义上是有效的，但它的可用性并不好。用户不会明白发生了什么，因为外观中没有任何内容表明行的单元格实际上是一个链接。此外，由于它们是单独的链接，因此标签变得笨拙。

根据表的内容和性质，在某种意义上，您可以选择一列作为“主要”（可能使用标题或标题等数据，可能被视为行标题），并使用` ...仅适用于该列中的单元格。

Answer 2

听起来你需要创建一个html锚吗？

<a href="#BLA">BBBB</a>

<a name="BLA"></a>

此处的内容。

Answer 3

您可以实际上在没有javascript的情况下执行此操作并且无需重复链接数十/数百或数千次。这取决于你支持的浏览器，特别是它们支持的CSS，但是如果像大多数现代的那样，它们可以处理position：absolute和td：first-child，那么这就是我想出的类似问题：

将链接放在第一列：

<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;}

解释：第一个规则仅删除我第一个td上的所有填充。默认情况下，我的td上的填充是.5em。第二个规则在链接上添加相同的填充，否则最终会出现未对齐的单元格内容。它还纠正了我的一些标准样式，以确保列看起来都一样。您也可以通过其他方式执行此操作（将链接样式添加到您的td）。使用最后两条规则，我摆脱了链接上的默认悬停效果，然后将它放在tr上，用于任何具有正确类的表。

这适用于我关心的浏览器，但你当然应该在你关心的人身上进行测试:)希望我能用这篇文章帮助你节省一些时间！

在没有JavaScript的情况下链接表row（）

3 个答案: