Question

我有一些包含链接的菜单项：

string

但是只能在此<tr> <td> <a href ="#" onclick="selectItem(this)" style="text-decoration: none">' + response[index] + ' </a> </td> </tr>（列）的某些部分上单击。我如何将其设置为在整个列的宽度和高度上都可单击？

Answer 1

<tr> 
   <td onclick="selectItem(this.textContent)" style="cursor:pointer">' + response[index] + ' </td> 
</tr>

Answer 2

  <td style="position: relative;"> 
    <a href ="#" style="text-decoration: none; position: absolute; left: 0; right: 0; top: 30%">' + response[index] + ' </a> 
  </td>

top：可以根据字体大小或填充或其他CSS规则调整30％。

Answer 3

尝试将锚标签的高度和宽度设置为100％。
尝试在JavaScript中捕获事件/冒泡（仅提示开始）。
如果您自己编写此表，请尝试在td本身上添加点击功能（我不确定这是否可行）。

Answer 4

您可以使用display: block来使用a元素完全填充单元格：

table {width: 100%;}
tr {background: blue; border: 1px red solid;}
a.full-link {display: block; background: yellow; text-decoration: none;}

<table>
<tr> 
<td>
  <a class="full-link" onclick="selectItem(this)" href="">your text </a> 
</td> 
</tr>
</table>

如何设置整个td元素上可点击的链接区域？

4 个答案: