如何在整个单元上建立链接？

我有一个包含链接（锚点）的表格，可以单击该表格来编辑该行。 我希望这些链接被拉伸到包含单元格的全部宽度和高度。我已经将它们设置为display: block;让他们有充分的宽度：如何在整个单元上建立链接？

enter image description here

的问题是，我有麻烦使用CSS让他们充分的高度。看到我的例子小提琴在这里：http://jsfiddle.net/timbuethe/53Ptm/2/。

2012-02-03 Tim Büthe

几乎复制http://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height – 2012-02-03 10:49:55

在块元素上设置一个任意大的负边距和相等的填充值，并在父元素上隐藏溢出。

td { 
    overflow: hidden; 
} 
td a { 
    display: block; 
    margin: -10em; 
    padding: 10em; 
}

http://jsfiddle.net/53Ptm/43/

来源

2013-04-04 01:37:07 zobier

这是答案，它的效果很好。 – 2013-04-04 18:02:39

您可以在每个单元格上使用一个小小的JavaScript来解决此问题，以便在单击单元格时将JavaScript发送给用户。您将要使用该行代码为每个小区< TD> </TD>

<td bgcolor="lightgray" onClick="document.location.href='http://www.URLHERE.com/';" style="cursor:pointer;"><a>c 1</a></td>

用户没有我已经把<一> </A>到位标签以防万一已启用JavaScript，但单元格的背景将保持不变，使用这段JavaScript应该覆盖大多数用户。

来源

2012-02-03 10:54:50

使用jQuery您可以将click事件监听器附加到整个<td>元素。

假设变量redirectLink是在脚本的前面定义的。例如：
var redirectLink = "http://msmvps.com/blogs/jon_skeet/";
但是这可能是任何其他真棒URLü选择;）

$(".cellLink").click(function(){ 
    // execute the redirect here 
    top.location.href = redirectLink; 
});

的$(".cellLinks")是jQuery Selector，其中包括与他们cellLink类的所有元素。例如：
<td class="cellLink">c&nbsp1</td>

cellLink只是我发明的一个名字 - 你可以称之为任何名字对你来说都是合乎逻辑的。

<tr class="cellLink"> 
    <td>...</td> 
    ... 
</tr>

在这种情况下，它可能是一个更好的主意，把它的东西更通用：

同样可以在一整行，如果你把它同cellLink类来实现。

来源

2012-02-03 10:56:05 Lix

的所以需要链接总是在这里硬编码？ – 2012-02-03 10:58:53

完全没有@JannisM ...我已更新我的代码以反映这一点。 – Lix 2012-02-03 11:01:59

您也可以使用如自定义标签： '等等 “ 和使用 $（” cellLink。 “）.click（function（）{ //执行此处的重定向 top.location.href = $（this）.attr（”href“）; }）; – Eregrith 2012-02-03 11:17:19

我不认为它可以只使用CSS，因为height属性总是引用元素内容，而不是父元素高度。

再次检查Fiddle并查看它是如何使用简单的javascript制作的。它获取父元素的高度，并将其保存在一个变量中，然后将该样式规则附加到您的锚元素。

来源

2012-02-03 10:56:08

您只需取第一个td的高度，如果你有不同高度的行，我分叉你的小提琴并修复：http://jsfiddle.net/timbuethe/fNGEU/9/ – 2012-02-06 11:09:43

我要去跟Jannis M的answer，但修改了它用每行的高度是这样的：

$(document).ready(function(){  
    $('table tr').each(function(){ 
     var $row = $(this); 
     var height = $row.height(); 
     $row.find('a').css('height', height).append('&nbsp;'); 
    });  
});

另外，我加了 因为空链接（不包含文本节点）不能被称为（？）。

查看我更新的fiddle。

UPDATE： 或者看到Gaurav Saxena的answer的CSS只，在现代浏览器上运行的解决方案。

来源

2012-02-06 11:22:11

对不起，但Gaurav的回答是不正确的。请参阅我的评论为什么在他的帖子。解决方案是zobier的解决方案，它实际上在两个线程中。 – 2013-04-04 18:03:54

是的，现在接受zobier的答案。 – 2013-04-05 08:50:37

如何在整个单元上建立链接？

回答

相关问题