如何添加超鏈接到錶行<tr>

Question

我有一個表，它的錶行中循環<tr>，產生和形成多行。

我想給單獨<a>鏈接到每個<tr>。因爲在表中我們可以只添加數據添加到<td>只是，我不能夠做到這一點。

是否有任何其他的方式來實現這一目標。請專家幫

Answer 1

HTML：

<table> 
    <tr href="http://myspace.com"> 
     <td>MySpace</td> 
    </tr> 
    <tr href="http://apple.com"> 
     <td>Apple</td> 
    </tr> 
    <tr href="http://google.com"> 
     <td>Google</td> 
    </tr> 
</table> 

使用JavaScript jQuery庫：

$(document).ready(function(){ 
    $('table tr').click(function(){ 
     window.location = $(this).attr('href'); 
     return false; 
    }); 
}); 

你可以在這裏試試這個：http://jsbin.com/ikada3

CSS（可選）：

table tr { 
    cursor: pointer; 
} 

或與data-href代替href的HTML有效版本：

<table> 
    <tr data-href="http://myspace.com"> 
     <td>MySpace</td> 
    </tr> 
    <tr data-href="http://apple.com"> 
     <td>Apple</td> 
    </tr> 
    <tr data-href="http://google.com"> 
     <td>Google</td> 
    </tr> 
</table> 

JS：

$(document).ready(function(){ 
    $('table tr').click(function(){ 
     window.location = $(this).data('href'); 
     return false; 
    }); 
}); 

CSS：

table tr[data-href] { 
    cursor: pointer; 
} 

Answer 2

如果你說你想每個<tr>點擊，您可以在click事件添加到每個<tr>，或者更好的是，添加.delegate()處理程序，以管理其<tr>元素的點擊次數的table。

$('#myTable').delegate('tr','click',function() { 
    alert('i was clicked'); 
}); 

此代碼假定您table有myTable ID：

<table id="myTable"> 
    <tr><td> cell </td></tr> 
    <tr><td> cell </td></tr> 
</table> 

如果這不是你的意思，那麼請澄清你的問題，並張貼您所使用的相關javascript代碼。

Answer 3

<tr><td><a></a></td></tr> 

這個？

Answer 4

我的第一反應一致，需要更多的信息。但如果你只是試圖讓一個鏈接表，你可以做

<tr><td><a href="...">...</a></td></tr> 

Answer 5

保險費的建議是當你生成表以添加標記。如果您需要做的是表之後被渲染，你想使用JavaScript，你可以隨時添加類似

var mytable = document.getElementById("theTable") 
var myrows = mytable.rows 

for(i=0;i < myrows.length;i++) 
{ 
    var oldinner; 
    oldinner = myrows[i].cells[0].innerHTML; 
    myrows[i].cells[0].innerHTML = "<a>" + oldinner + "</a>"; 
} 

，或者如果你需要它做的每一個細胞，你可以隨時

var mytable = document.getElementById("theTable") 
var myrows = mytable.rows 

for(i=0;i < myrows.length;i++) 
{ 
    mycells = myrows[i].cells; 

    for(a=0;a < mycells.length;a++) 
    { 
    var oldinner; 
    oldinner = mycells[a].innerHTML; 
    mycells[a].innerHTML = "<a>" + oldinner + "</a>"; 
    } 
} 

我希望對您有所幫助

Answer 6

PHP：

echo "<tr onclick=\"window.location='".$links[$i]."'\">......"; 

的Javascript不jQuery的：

x=1; 
. 
. 
for (...) { 
    var tr=document.createElement('tr'); 
    tr.onclick=function() { window.location='page'+(x++)+'.html'} 
    tr.style.cursor='pointer'; 
. 
} 

將讓各行上用戶點擊 你可以使用數組來加載頁面太：

x=0; 
var pages=["pagea.html","pageb.html"] 
. 
. 
for (...) { 
    var tr=document.createElement('tr'); 
    tr.onclick=function() { window.location=page[x++];} 
    tr.style.cursor='pointer'; 
. 
} 

Answer 7

jQuery.wrap返回的錨固定於td，然後添加到tr和jQuery.appendTotable

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id'); 

Answer 8

你可以根據妮可的建議簡單地生成和內部：

<tr><td><a href="url">title of the url</a></td></tr> 

或將URL中tr標籤像 使用jQuery包括

$('tr.clickable').click(function(){ 
    window.location = $(this).attr("title"); 
}); 

給您帶來的是網頁上點擊（基本上是黑客在TR就像一個標籤（只是一個想法工作，從來沒有真正嘗試過。

Answer 9

加入

，並更改顯示樣式爲display：block

，並添加相同的尺寸是這樣的：

CSS：

#Table a { 
display:block; 
} 
#Table td { 
width:100px; 
hright:100px 
} 

HTML：

<table id="Table"> 
    <tr><td><a onclick="" href="#"> cell </a></td></tr> 
    <tr><td> cell </td></tr> 
</table> 

Answer 10

挑撥離間@ ahmet2016，並保持它的W3C標準。

HTML：

<tr data-href='LINK GOES HERE'> 
    <td>HappyDays.com</td> 
</tr> 

CSS：

*[data-href] { 
    cursor: pointer; 
} 

的jQuery：

$(function(){  
    $('*[data-href]').click(function(){ 
     window.location = $(this).data('href'); 
     return false; 
    }); 
}); 

Answer 11

我發現把一個錶行成一個鏈接的最簡單方法是使用onclick屬性與window.location。

<table> 
<tr onclick="window.location='/just/a/link.html'"> 
<td></td> 
</tr> 
</table> 

Answer 12

您可以使用data-href腳本在任何html元素中添加href。它使html有效，因爲它僅向元素添加data-href屬性。

https://github.com/nathanford/data-href/