Hacer una fila de una tabla clickable en HTML

Filas en HTML y enlaces

Este es el típico problema que hasta que no te pasa, ni siquiera sabías que existía. La cuestión es la siguiente:

1
2
3
4
5
6
7

<table border="0" width="">
    <tr>
         <td>Uno</td>
         <td>Dos</td>
         <td>Tres</td>
    </tr>
</table>

Teniendo una tabla en HTML como la de arriba queremos que una fila entera se comporte como un enlace hacia otra página, es decir, como si estuviera entre la etiqueta anchor de HTML ().

Lo más intuitivo pero incorrecto

Pues metes el elemento ‘table row’ (tr) entre la etiqueta anchor y listo.

1
2
3
4
5
6
7
8
9

<table border="0" width="">
<a href="link.html">			
<tr>
     <td>Uno</td>
     <td>Dos</td>
     <td>Tres</td>
</tr>
</a>
</table>

Por desgracia esto no funciona, así que mal asunto. A partir de este punto es cuestión de echarle mucha imaginación o de intentar pensar un poco, en ambos casos no llegaremos a la solución perfecta, pero cerca nos quedaremos.

Imaginación al poder

Una solución es crear un anchor que se vaya moviendo por encima de cada fila según el mouse vaya pasando por ellas. Como puedes suponer, esta solución está en JavaScript, concretamente se ha usado jQuery y se ha realizado un plugin. Su uso es tan sencillo como:

1

$('table#mitabla tr').superLink('a:last');

Pros

Pues probablemente que es una solución con mucha imaginación detrás y su uso es realmente sencillo. Puedes ver el demo aquí, donde también hay un enlace donde el autor explica su idea.

Contras

Pues que al usar CSS y definir :hover (para cuando se pase el ratón por encima) no funciona. Es decir que el comportamiento normal que tiene un anchor en una página con respecto al CSS no existe. Además de eso, lo cierto es que tiene demasiada complejidad para una cosa que en principio puede parecer tan simple.

Solución intuitiva

Esta segunda opción viene dada por Eric. Lo cierto es que es bastante más sencilla, tiene en cuenta que realmente lo que queremos es que al hacer click en cualquier punto de una fila nos lleve a otra página. Así que con algo tan sencillo como esto no tendríamos que complicarnos más la vida:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload = function(){
    ConvertRowsToLinks("table1");
}
 
function ConvertRowsToLinks(xTableId){
    //Seleccionamos todas las table row (filas) del documento
    var rows = document.getElementById(xTableId).getElementsByTagName("tr");
 
    //Las recorremos con un for
    for(i=0;i<rows.length;i++){
        //Buscamos dentro de cada table row (tr) un elemento a
        var link = rows[i].getElementsByTagName("a");  
 
        if(link.length == 1){
            //Si lo encontramos asociamos el evento click con la redirección
            rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
        }
    }
}

Pros

Su simplicidad en cuanto a codificación, y que si respeta el problema del CSS. He preparado un ejemplo sencillo con Google Code PlayGround (del que hice un post hace un tiempo). El ejemplo está aquí (el enlace lo he puesto con #1 y #2 para no salir de la página al hacer click pero puedes ver que funciona en la barra de direcciones ). Además esto está en JavaScript plano, por lo que no necesitamos incluir jQuery, como pasaba con el anterior.

Contras

Cuando el usuario no ejecuta el click sino intenta ir a la página de otra forma (por ejemplo pinchando con la rueda para abrir en otra pestaña) pues no lo podemos detectar. Hay varios eventos asociados a un anchor que nos pueden ser útiles (middle-click para el caso de la rueda, por decir alguno), pero tendríamos que definir la función asociado a cada evento y eso no es muy cómodo que digamos.

Conclusión

Hay tantas soluciones como se te puedan ocurrir, de hecho hay más plugins de jQuery por ahí con la misma función que el mostrado en el ejemplo primero, pero estas dos soluciones me parecieron las más destacables. ¿Tienes alguna otra?

Foto de Wouter