如何在整個單元上建立鏈接？

我有一個包含鏈接（錨點）的表格，可以單擊該表格來編輯該行。 我希望這些鏈接被拉伸到包含單元格的全部寬度和高度。我已經將它們設置爲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

如何在整個單元上建立鏈接？

回答

相關問題