Question

我有一个<table>，其中每个<td>只包含一个锚点。我希望用户能够单击单元格中的任何位置来访问该引用，而不仅仅是锚文本本身。我想必须有一些jQuery才能轻松完成。有人可以帮忙吗？

编辑：为了使事情变得复杂，我的td有一些顶部和底部填充。在这种情况下，display: block;规则似乎不起作用。我编辑了这个例子：

CSS：

table#mainmenu td {
    padding: 9px 8px 5px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-left: 1px dotted; 
    text-align: left;
}

示例：

<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>

Answer 1

只需制作A标记display: block。

table td a {
  display: block;
}

http://jsfiddle.net/userdude/6VZ8t/

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

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

http://jsfiddle.net/userdude/a2EAz/

修改

由于我无法找到以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();

http://jsfiddle.net/userdude/Mekjg/1

请注意，这是从$(document).ready();开始的。

编辑2

由于 mu太短备注，负边距应该有效（并且没有jQuery）：

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

http://jsfiddle.net/ambiguous/seqpp/

Answer 2

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

演示：http://jsfiddle.net/rarTf/

Answer 3

将css设为

table td { 游标：指针; }

并将脚本设为

$（'table td'）。click（function（）{ window.location.href = $（ 'A'，这一点）.attr（ 'href' 属性）; }）;

想要使整个TD单元成为锚点

3 个答案: