使用表格行作为超链接答案

【问题标题】：using table row as a hyperlink使用表格行作为超链接
【发布时间】：2015-05-10 13:09:54
【问题描述】：

我有一个下拉菜单，它是一个表格和表格行。每行包含一个单词，它是一个超链接文本。我希望超链接词后面的空格是指向与文本本身相同的 url 的链接。

这就是我目前所拥有的

<TR ID="opt_1" onclick href="boom.php?catname=booyah " ONMOUSEOVER="hiLiteM('01'); hiLite('1')" ONMOUSEOUT="unLite('1'); unLiteM('01')" ><TD> <a onclick href="boom.php?catname=booyah ">booyah</A></TD></TR>

这个不行，有什么建议可以让我成功吗，谢谢

【问题讨论】：

我发现一个有趣的事情是你几乎每个标签都大写，onclick 是空的，没有明显的原因。启发我，你为什么要这样做？
暂时性迟滞

标签： html hyperlink

【解决方案1】：

您可以将锚定样式设置为块元素，它将填充整个单元格。由于你的行中只有一个单元格，我认为这应该可以完成你想要的，而不需要 javascript：

<tr id="opt_1">
    <td><a style="display: block" href="boom.php?catname=booyah">booyah</a></td>
</tr>

See JSFiddle

我不确定这些 mouseover 和 mouseout 函数的作用，但我假设它们是样式更改，可以通过 CSS 轻松完成。

【讨论】：

【解决方案2】：

<TR ID="opt_2" onClick="location.href='brands.php?catname=Asprey'" ONMOUSEOVER="hiLiteM('01');hiLite('2')" ONMOUSEOUT="unLite('2'); unLiteM('01')"><TD><A  onclick href="brands.php?catname=Asprey">Asprey</A></TD></TR>

这是我的解决方案。有人有更好的吗？

【讨论】：

【解决方案3】：

是的，您可以通过在 td 中放置锚标记并将宽度为 100% 的类赋予锚标记来将整个 td 设为超链接。

JSFiddle

CSS

table { width: 300px; }

table, table tr, table td
{
margin:0%;
}

.td-link
{
    display:inline-block;
    width:100%;
    background:aqua;
}

a
{
   text-decoration:none;
    color:black;    
}

HTML

<table>
    <tbody>
         <tr>
             <td>
                 <a href="abc.html" class="td-link">TD is made link now </a>
             </td>
        </tr>
    </tbody>
</table>

【讨论】：