Hacer que un <tr> sea un link

[JonaLamper]

Buenas,

Digamos que tengo una tabla que se rellena dinámicamente con jQuery al realizar una petición al servidor y quiero que cada fila de la tabla sea un enlace (para que al pulsarlo me aparezcan más detalles sobre ese resultado).

¿Alguien sabe cómo podría hacer que una fila de una tabla sea un link?


Muchas gracias!  

[z3nth10n]

Buenas JonaLamper,

mmm... <tr> es la fila (es decir, el conjunto de celdas), te referiras a cada celda, si es así con añadir un input o un <a>, eso, si acuerdate de anular el evento del a, poniendo al final un return false...

De otra forma, no se a que te refieres, si puedes ejemplificar con images o codigo que ya tengas sería de utilidad

Un saludo.

[#!drvy]

Si usas jQuery puedes usar el listener onClick.

Código (html5) [Seleccionar] Expandir

<table>
   <tr class='showData' data-href='pagina1'>
       <td>...</td>
       <td>...</td>
       <td>...</td>
   </tr>

   <tr class='showData' data-href='pagina2'>
       <td>...</td>
       <td>...</td>
       <td>...</td>
   </tr>
</table>

Código (javascript) [Seleccionar] Expandir

$(function(){

 $('body').on('click', '.showData', function(event){

   event.preventDefault();
   alert( $(this).data('href') );
   
 });

});


PD: Nota como el listener (on), actual sobre body es el que busca .showData.. si se hace directamente ($('.showData').on..)) no te dispararía el evento en DOM añadido después de la carga inicial (ajax por ejemplo).

Saludos

[JonaLamper]

Muchísimas gracias. Al final lo he conseguido de otra forma (ahora después lo pongo). Es que al final no hacia falta hacer que el <tr> fuese un link.


Otra pregunta: digamos que tengo una tabla que se rellena de forma dinámica con jQuery.

Código (javascript) [Seleccionar] Expandir

                   var fila = $("<tr id="+ curso.titulo +">");
                     // Añadimos el texto obtenido de la base de datos
                   fila.append($("<td>").text(curso.titulo));
                   fila.append($("<td>").text(curso.localidad));
                   fila.append($("<td>").text(curso.fecha_inicio));
                   fila.append($("<td>").text(curso.fecha_fin));
                   fila.append($("<td>").text(curso.plazas_disponibles));
                   // Añadimos la fila al cuerpo de la tabla
                   $("#tabla_cursos tbody").append(fila);

Digamos que es una tabla de cursos escolares, por ejemplo. Como vemos, cada <tr> se genera metiendo un id (que es el título del curso). Ahora, lo que pretendo es que, al pulsar en una fila, se ejecuta una determinada acción. Así que he pensado en obtener el id del <tr> sobre el que se pulse. Pero... no lo consigo. En primer lugar he probado a que me muestre por consola un mensaje cuando se pulse dentro de un <td>, y ni siquiera eso soy capaz de hacer.

Código (javascript) [Seleccionar] Expandir

 
   $("td").on("click",function(){
       console.log("Se ha pulsado en un td");
   });


La verdad es que no entiendo porqué este último código no me funciona, si es súper simple xD

Os dejo una foto para que os hagáis una idea de cómo es la tabla:



¿Alguien sabe cómo podría hacer todo esto?

Gracias de nuevo  

[#!drvy]

El problema, como ya te comente de forma muy mal escrita xD, es que el DOM agregado después de la carga inicial hay que capturarlo desde un elemento que si se haya cargado al principio.

Es decir:

Código (javascript) [Seleccionar] Expandir

$('#tabla_cursos').on('click', 'td', function(event){
   var currentID = $(this).parent('tr').attr('id'); // Id del <tr>

   console.log('Se ha pulsado en un td');
   console.log('El elemento pulsado tiene de id: ' + currentID);
});

Eso suponiendo que #tabla_cursos la generas antes de la precarga.

Saludos

[JonaLamper]

Oh! Muchas gracias, ya funciona.

Vaya, no tenía ni idea de eso (y tiene muchas consecuencias xD).

Sí, las etiquetas table son estáticas en el HTML  

[JonaLamper]

Hola de nuevo 

Me ha surgido un problemilla... Si el id estuviera compuesto por una cadena del tipo "Mi nombre", sólo coge "Mi" como parte del id. ¿Sabéis como podría hacer que cogiese toda la cadena?


¡Gracias!

[#!drvy]

Hola,

El problema con los id con espacio es que van en contra de las normas. Ni HTML4 ni HTML5 los permiten. De hecho HTML5 quitó bastantes restricciones pero mantuvo esa. Y es bastante razonable teniendo en cuenta que esta pensado para ser usado como una propiedad vía javascript.

De todos modos, haciendo pruebas veo que el attr() de jQuery si lo recoge (con espacios), al menos en Chrome.

Siempre puedes reemplazar los espacios por guiones a la hora de suministrar el id.. pero vamos.. para almacenar información compleja lo que te recomendaría es usar los atributos data-*.

Código (html5,2,6) [Seleccionar] Expandir

<table>
    <tr data-curso='Batch en Linux 101' id='curso1'>
        <td>...</td> <td>...</td>  <td>...</td>
    </tr>

    <tr data-curso='Cocinar huevos para dummies' id='curso2'>
        <td>...</td> <td>...</td>  <td>...</td>
    </tr>
</table>

Código (javascript,5) [Seleccionar] Expandir

$('#tabla_cursos').on('click', 'td', function(event){
    var _parent = $(this).parent('tr');

    var cursoID = _parent.attr('id');
    var cursoTitulo = _parent.data('curso');

    console.log(cursoID + ' Titulo: ' + cursoTitulo);
});

Saludos