Html 使 TD 可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19326426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a TD clickable
提问by user2766367
I've set up a fiddlewith a table.
我已经设置了一张桌子的小提琴。
You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.
你看，我试图制作一个表格，用户将在其中悬停并单击 td 以显示一个 id。检查小提琴，你就会明白。
Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....
现在，当用户将鼠标悬停在 Parent4 上时，您可能会注意到桌子上有一个没有文本的空间，用户无法点击它，因此 Child4 不会出现......
Now, is there any way I can make the space where there's no text clickable so it shows up child4?
现在，有什么办法可以使没有文本可点击的空间显示为 child4？
I tried
我试过
<td ahref="#child4"> but didn't work...
////?EDIT As its a bit confusing...
////?EDIT 因为它有点令人困惑...
I need you to see the fiddle. You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?
我需要你看看小提琴。您可以看到 Parent4 的单元格比文本大。因此，当用户将鼠标悬停在单元格上时，我希望文本更改颜色并且单元格也更改颜色 + 如果用户单击单元格 Child4 将不会出现，因为单元格不可点击，所以我的问题是，如何制作单元格可点击以显示 Child4？
UPD:
更新：
I didn't update the fiddle, but it's now up to date.
我没有更新小提琴，但它现在是最新的。
回答by James Donnelly
The hrefproperty is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. ais an element of its own, not a HTML attribute, and hrefis an attribute it accepts.
该href属性是为锚元素 ( <a/>)设计的。“ahref”正如你所说的应该是<a href="">。a是它自己的元素，而不是 HTML 属性，并且href是它接受的属性。
To make the text of a tdclickable you can simply put an anchor within it:
要使文本td可点击，您只需在其中放置一个锚点：
<td>
<a href="#child4">My clickable text</a>
</td>
Edit:To fix this now that the question has been added, simply add in the following CSS:
编辑：要解决这个问题，现在已经添加了问题，只需添加以下 CSS：
td a {
display:block;
width:100%;
}
What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.
这样做是将锚标记显示为一个块，允许我们调整宽度，然后将宽度设置为 100%，使其填充剩余空间。
回答by Jonysuise
Add the onClick event on the td mark.
在 td 标记上添加 onClick 事件。
<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>
回答by Totoro53
There is a very simple way of doing this with just HTML. Put the link text inside a DIV. The DIV occupies the whole TD and makes it all clickable.
有一种非常简单的方法可以只用 HTML 来做到这一点。将链接文本放在 DIV 中。DIV 占据了整个 TD 并使其全部可点击。
<a href="http://whatever.com">
<div>
Link Text
</div>
</a>
回答by JamesC
Just wanted to add two ways that actually worked inside the for me:
只是想添加两种对我来说实际有效的方法：
Using Angular 5:
a. in [yourname].component.html:
<table id='myTable'> <tr><td (click)="myClick()">my cell</td>...b. In [yourname].component.ts: (inside your exported class.. ) simply implement the needed function..
export class [youyname].... { .... myClick() { } }Pure 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>....The easiest way..
(Note: It's possible to put the script inside the tag, or even load an external JS file inside it, but I don't like doing it like that.)
使用 Angular 5：
一种。在 [你的名字].component.html 中：
<table id='myTable'> <tr><td (click)="myClick()">my cell</td>...湾 在 [yourname].component.ts: ( 在你的导出类中.. ) 只需实现所需的功能..
export class [youyname].... { .... myClick() { } }纯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 文件，但我不喜欢那样做。）
回答by Marc Ripley
If you're trying to make an area clickable with no text, you can define the size of the tag like so:
如果您试图使一个区域可点击而没有文本，您可以像这样定义标签的大小：
<a href='#child4' class="parent" style="display: block;width: 300px;height: 10px;"></a>
This will create the block without any object or text inside.
这将创建内部没有任何对象或文本的块。
回答by LuFaMa
Simplest thing would be to populate the "empty" cell with:
最简单的事情是填充“空”单元格：
That should do the trick for you.
那应该对你有用。
