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

Question

>我用桌子设置了一个小提琴。

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

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

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

我试过了

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

/

///？编辑 因为它有点令人困惑...

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

上级：

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

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。

Answer 2

在

td 标记上添加 onClick 事件。

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

Answer 3

有一种非常简单的方法可以只用 HTML 来做到这一点。将链接文本放在 DIV 中。DIV 占据了整个 TD，并使其全部可点击。

<a href="http://whatever.com">
  <div>
     Link Text
  </div>
</a>

Answer 4

如果您尝试使一个区域可点击且没有文本，您可以像这样定义标签的大小：

<a href='#child4' class="parent" style="display: block;width: 300px;height: 10px;"></a>

这将创建内部没有任何对象或文本的块。

Answer 5

只是想添加两种在我内部实际工作的方法：

1. 使用 Angular 5：

   a. 在 [yourname].component.html：

     <table id='myTable'>
        <tr><td (click)="myClick()">my cell</td>...
   

   b. 在 [yourname].component.ts： (在导出的类中。 只需实现所需的功能。

      export class [youyname].... {
        ....
        myClick() {
        }
      }
   

2. 纯JS：

     <script>
         function myClick(){
             console.log("got here");
             // Do Whatever you want
         }
     </script>
   
     <div id='myDiv'>
       <table id='myTable'>
          <tr><td onClick="myClick()">Yo..</td><td>....
   

   最简单的方法..

   (注意：可以将脚本放在标签中，甚至可以在其中加载外部JS文件，但我不喜欢这样做。

Answer 6

非常简单的方法就是添加onClick='myFunction(('前任：

<table>
<tr>
<td onClick="myFunction()">hello</td>
</tr>
</table>

Answer 7

如果使用哈巴狗/玉，请尝试以下操作;

tr(onclick="document.location.href='http://www.google.com';")
  td.py-2.align-middle

Answer 8

最简单的方法是用以下内容填充"空"单元格：

 

这应该可以为您解决问题。