Javascript 如何使整个 td 成为链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6459806/
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
How to make entire td a link?
提问by user784637
How do I make this entire td a link?
如何使整个 td 成为链接？
<td id="blue-border"><span id="blue"></span></td>
Clicking td should make it behave like this (I know this is syntactically incorrect:
单击 td 应该使它的行为像这样（我知道这在语法上是不正确的：
<a href="javascript:chooseStyle('blue-theme', 360)"> <td id="blue-border"><span id="blue"></span></td> </a>
EDIT: so far all the suggestions are only making the span inside the td a link, help lol.
编辑：到目前为止，所有建议都只是使 td 内的跨度成为链接，帮助哈哈。
回答by Will Martin
Use CSS.
使用 CSS。
<style type="text/css">
td a { display: block; width: 100%; height: 100%; }
</style>
<td><a href="#">Link</a></td>
The CSS forces the link to expand to the full width and height of the TD.
CSS 强制链接扩展到 TD 的整个宽度和高度。
回答by John Kalberer
You can't wrap a td in an anchor. Do this:
您不能将 td 包装在锚点中。做这个：
<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td>
Or
或者
<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>
回答by rolling stone
Add an anchor tag inside of the td and set its display attribute to block. This should make the entire td clickable.
在 td 内部添加一个锚标记并将其显示属性设置为块。这应该使整个 td 可点击。
#blue-border a{
display: block;
}
or
或者
<a href="link" style="display:block;">
回答by n8wrl
Define an OnClick event for the td:
为 td 定义一个 OnClick 事件：
<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...
回答by Joe Enos
If all you're doing is firing javascript, I'd suggest using onclickinstead of an anchor tag in the first place, like:
如果您所做的只是触发 javascript，我建议首先使用onclick而不是锚标记，例如：
<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>
You can throw a simple css style on there if you want the mouse to become a pointer:
如果你想让鼠标变成一个指针，你可以在那里抛出一个简单的 css 样式：
#cell123:hover { cursor: pointer; }
回答by Marco Hurtado
<table width="100%" class="blueCss">
<tr>
<td ID="tdBlue">
<span id="Blue">Hello</span>
</td>
<td>
<span>other col</span>
</td>
</tr>
</table>
css file:
css文件：
.blueCss {
height: 100px;
width: 100px;
}
.blueCss td {
background-color: blue;
}
.blueCss:hover {
border-color: #00ae00;
}
.blueCss td:hover {
background-color: yellow;
cursor: pointer;
}
jQuery code:
jQuery代码：
$(document).ready(function(){
? ??var tdLink = $('#tdBlue');
? ??tdLink.click(function(){
? ? ? ? ?alert('blue-theme');
? ??});
});
Check here: jsFiddle.net
在这里检查：jsFiddle.net
回答by sumac2003
Use jquery with class$("tr td.data_col").click(function() {
window.location = $(this).find('a').attr("href");
});
将 jquery 与类一起使用$("tr td.data_col").click(function() {
window.location = $(this).find('a').attr("href");
});
