为什么 \`<td>\` 元素上的 \`href\` 属性不起作用？

Question

我已经用桌子摆好了 小提琴。

你看，我正在尝试制作一个表格，用户将在其中悬停并单击 td 以显示 id。检查小提琴，你就会明白。

现在，当用户将鼠标悬停在 Parent4 上时，您可能会注意到表格上没有文本的空间，用户无法单击它，因此 Child4 不会出现….

现在，有什么方法可以使没有文本可点击的空间显示为 child4？

我试过

<td ahref="#child4"> but didn't work...

////?编辑因为它有点混乱……

我需要你看看小提琴。您可以看到 Parent4 的单元格比文本大。因此，当用户将鼠标悬停在单元格上时，我希望文本改变颜色并且单元格也改变颜色+如果用户单击单元格 Child4 将不会出现，因为单元格不可点击，所以我的问题是，我该如何制作单元格可点击以显示 Child4？

更新：

我没有更新小提琴，但它现在是最新的。

原文由 user2766367 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

href 属性专为 定位元素 ( <a/> ) 而设计。您输入的“ahref”应该是 <a href=""> 。 a 是它自己的元素，不是 HTML 属性，而 href 是它接受的属性。

要使 td 的文本可点击，您只需在其中放置一个锚点即可：

 <td>
    <a href="#child4">My clickable text</a>
</td>

编辑： 现在问题已添加，要解决此问题，只需添加以下 CSS：

 td a {
    display:block;
    width:100%;
}

这样做是将锚标记显示为一个块，允许我们调整宽度，然后将宽度设置为 100%，使其填充剩余空间。

工作 JSFiddle 。

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 td 标记上添加 onClick 事件。

 <td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>

原文由 Jonysuise 发布，翻译遵循 CC BY-SA 3.0 许可协议