1

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

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

还

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

不工作。

有没有没有 Javascript 的解决方案来实现这一点？

在此先感谢 Naymecliff

4

3 回答 3

1

恐怕这是不可能的。您可以将td元素的内容设为链接，并且通过 HTML5 规则（以及浏览器实践），您可以将整个表格设为链接。但是中间级别，表格行元素tr，不能转换为 HTML 中的链接。

如果你把每个内容都td做成一个链接，让一行的单元格指向同一个目的地，那么事情在某种意义上是可行的，但它的可用性并不好。用户看不到发生了什么，因为外观中没有任何内容表明一行的单元格实际上是一个链接。此外，由于它们是单独的链接，因此标签变得尴尬。

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

于 2012-07-12T10:25:50.263 回答
0

听起来您需要创建一个 html 锚点？

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

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

内容在这里。

于 2012-07-12T10:08:10.310 回答
0

您实际上可以在没有 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 上的填充是 0.5em。第二条规则在链接上添加相同的填充，否则最终会出现未对齐的单元格内容。它还纠正了我在 a 上的一些标准样式，以确保所有列看起来都一样。你也可以反过来做（将链接样式添加到你的 td）。通过最后两条规则，我摆脱了链接上的默认悬停效果，然后将其放在任何具有正确类的表的 tr 上。

这适用于我关心的浏览器，但您当然应该在您关心的浏览器中进行测试:) 希望我能帮助某人节省几分钟的这篇文章！

于 2013-12-06T16:17:22.157 回答