Cómo agregar un hipervínculo a la fila de la tabla <tr>

Question

Estoy teniendo una tabla con su fila de tabla <tr> generando en un bucle para formar varias filas.

Quiero dar separadamente <a> enlace a cada <tr>. Como en la tabla solo podemos agregar datos agregados a <td>, no puedo lograr eso.

¿Hay alguna otra manera de lograr esto. Los expertos ayudan a favor

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 usando jQuery Biblioteca:

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

puede probar esta aquí: http://jsbin.com/ikada3

CSS (opcional):

table tr { 
    cursor: pointer; 
} 

o la versión válida HTML con data-href en lugar de 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

Si usted está diciendo que quiere hacer cada <tr> puede hacer clic, se puede añadir un evento a cada click<tr>, o mejor aún, agregar un controlador .delegate() a la table que administra clics en sus <tr> elementos.

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

Este código se supone que su table tiene la myTable ID:

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

Si esto no es lo que quería decir, por favor, aclarar su pregunta, y enviar el código Javascript relevante que esté utilizando.

Answer 3

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

esto?

Answer 4

Acepto la primera respuesta, se necesita más información. Pero si usted está tratando de hacer una tabla de enlaces, que sólo puede hacer

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

Answer 5

La sugerencia prima habría que añadir las etiquetas cuando se genera la tabla.Si tiene que hacerlo después de la tabla se representa y desea usar javascript siempre se puede añadir algo como

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

o si necesita hacerlo para cada célula, su puede siempre

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

espero que ha resultado útil

Answer 6

PHP:

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

Javascript sin jQuery:

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

permitirá que el usuario haga clic en cada fila se puede utilizar una matriz para cargar las páginas demasiado:

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 el ancla vuelto a una td y luego añadir a tr y jQuery.appendTotable

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

Answer 8

Puede simplemente generar el interior con y como Nicole sugirió:

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

O poner la url de la etiqueta tr como con jQuery incluido

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

que le llevará a la página en clic (básicamente la piratería un tr para funcionar como una etiqueta (sólo un pensamiento, nunca lo intente realmente

Answer 9

añadir en

y cambiar el estilo de visualización de pantalla: bloque

y añadir mismo tamaño para de esta manera:

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

Jugar fuera de @ ahmet2016 y mantenerlo estándar del 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

La manera más fácil que he encontrado para convertir una fila de la tabla en un enlace es el uso de la atributo onclick con window.location.

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

Answer 12

Puede utilizar data-href script para añadir href en cualquier elemento HTML. Hace html válido ya que agrega solo el atributo data-href a un elemento.

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