Jquery 想让整个TD小区成为一个锚吗

我有一个

，其中每个

只包含一个锚。我希望用户能够单击单元格中的任何位置来访问该引用，而不仅仅是锚文本本身。我想一定有一些jQuery可以轻松地完成这项工作。有人能帮忙吗

编辑：为了使事情复杂化，我的

td

有一些顶部和底部填充。A

显示：块规则在这种情况下似乎不起作用。我编辑了以下示例：

CSS:

例如：

<table>
<tr>
  <td><a href="foo.html">Foo</a></td>
  <td><a href="bar.html">Bar</a></td>
</tr>
<tr>
  <td><a href="foobar.html">FooBar</a></td>
  <td><a href="barfoo.html">BarFoo</a></td>
</tr>
</table>

只需将A标记
显示为：block

table td a {
  display: block;
}


或者，如果您坚持使用jQuery：

$('table td a').css('display','block');


编辑

由于我无法找到CSS唯一的方法来选择子a的父TD，因此此解决方案使用jQuery：

function doTablePadding() {
    $td = $('table td');
    $td.has('a').css('padding','0');
    padding = $td.not(':has(a)').css('padding-top') + " ";
    padding += $td.not(':has(a)').css('padding-right') + " ";
    padding += $td.not(':has(a)').css('padding-bottom') + " ";
    padding += $td.not(':has(a)').css('padding-left') + " ";
    $td.children('a').css('padding',padding);
}
doTablePadding();
$('table tbody').append("<tr><td>Stuff</td><td><p>Other stuff</p></td></tr>");
$('table tbody').append('<tr><td><a href="foo.html">Foo</a></td><td><a href="bar.html">Bar</a></td></tr>');
doTablePadding();


演示：
只需将css设置为

表td{
光标：指针；
}

并将脚本制作为

$（'table td'）。单击（函数（）{
window.location.href=$（'a'，this.attr（'href'）；
});
 @BoltClock:因为。@BoltClock因为我不知道它这么简单。：）@Rich-别担心，我以前也想过这样的问题。在这种情况下，使用CSS比jQuery容易得多。@Rich-Display:block只是使A标记扩展到TD的全部内容（减去TD的填充）。您仍然需要使用display:block，您只需要考虑包含TD的填充。谢谢，jQuery在这方面做得太过火了。实际上，这并没有像我预期的那样有效。我的单元格中有填充，而块显示不与它们对齐。（很抱歉，这比我想象的要复杂得多）。在这种情况下，没有必要这样做；更容易使用CSS。例如，如果您使用jQuery，则必须确保在页面加载时调用jQuery代码，然后在信息更新后的任何时间调用。此外，您可以将填充从TD单元格中去掉，并将其添加到A标记中。@Jared:posted，是的，将填充推到A标记中也可以，但是我想要单元格上的填充，即使它们不包含A标签。对不起，我没想到会这么复杂。
function doTablePadding() {
    $td = $('table td');
    $td.has('a').css('padding','0');
    padding = $td.not(':has(a)').css('padding-top') + " ";
    padding += $td.not(':has(a)').css('padding-right') + " ";
    padding += $td.not(':has(a)').css('padding-bottom') + " ";
    padding += $td.not(':has(a)').css('padding-left') + " ";
    $td.children('a').css('padding',padding);
}
doTablePadding();
$('table tbody').append("<tr><td>Stuff</td><td><p>Other stuff</p></td></tr>");
$('table tbody').append('<tr><td><a href="foo.html">Foo</a></td><td><a href="bar.html">Bar</a></td></tr>');
doTablePadding();

td {
    padding: 5px;
    background: #0ff;
    border: 1px solid black;
}
td a {
    display: block;
    margin: -5px;
    padding: 5px;
    background: #f0f;
}

$(function(){
   $('td').click(function(){
    window.location = $("a", this).attr("href");
  });
})