Jak dodać hiperłącze do wiersza tabeli <tr>

Question

Mam tabelę z wierszem tabeli <tr> generowania w pętli, aby utworzyć wiele wierszy.

Chcę podać osobny link <a> do każdego <tr>. Ponieważ w tabeli możemy dodawać tylko dodawać dane tylko do <td>, nie jestem w stanie tego osiągnąć.

Czy jest jakikolwiek inny sposób, aby to osiągnąć. Eksperci Proszę o pomoc

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 używając jQuery Biblioteka:

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

Można spróbować to tutaj: http://jsbin.com/ikada3

CSS (opcjonalnie):

table tr { 
    cursor: pointer; 
} 

LUB HTML obowiązuje wersja z data-href zamiast href:

<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

Jeśli mówisz, że chcesz, aby każdy <tr> klikalne, można dodać do każdego zdarzenia click<tr>, lub jeszcze lepiej, dodać .delegate() obsługi do table która zarządza kliknięcia jego <tr> elementów.

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

Kod ten zakłada swój table ma myTable ID:

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

Jeśli to nie to, co masz na myśli to, to proszę wyjaśnić swoje pytanie i dodaj odpowiedni kod javascript używasz.

Answer 3

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

to?

Answer 4

Zgadzam się z pierwszą odpowiedzią, potrzebuję więcej informacji. Ale jeśli jesteś po prostu staramy się spis linków, można po prostu zrobić

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

Answer 5

Sugestia premia byłoby dodać tagi podczas generowania tabeli.Jeśli trzeba to zrobić po tabela jest renderowane i chcesz używać JavaScript zawsze można dodać coś takiego

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>"; 
} 

lub jeśli trzeba to zrobić do każdej komórki, Twój może zawsze

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>"; 
    } 
} 

mam nadzieję, że to pomocne

Answer 6

PHP:

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

Javascript bez jQuery:

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

pozwoli kliknięcie użytkownika na każdym rzędzie można użyć tablicę do załadowania strony zbyt:

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 zwrócony kotwica do td a następnie dodać do tr i jQuery.appendTotable

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

Answer 8

Możesz po prostu genować w środku, tak jak sugerowała Nicole:

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

Albo umieścić adres URL w tagu tr jak z jQuery zawarte

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

doprowadzić cię do tej strony na kliknięcie (w zasadzie hacking tr do pracy jak Tag (tylko myśl, nigdy tak naprawdę nie próbuj.

Answer 9

dodać

i zmienić styl wyświetlania na display: block

i dodać tę samą wielkość dla takiego:

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

Playing off @ ahmet2016 i utrzymanie jej standardy 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

Najprostszym sposobem znalazłem włączyć wiersz tabeli pod linkiem jest użycie onclick atrybut z window.location.

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

Answer 12

Możesz użyć skryptu data-href, aby dodać href w dowolnych elementach html. To sprawia, że ​​html jest prawidłowy, ponieważ dodaje tylko element data-href.

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