filas de una tabla como enlaces

mysterio069 · #1 (**permalink**) 02/06/2010, 03:21

Hola! vereis, no se si este tema esta bien aqui, ya que no se si lo que yo quiero se hace mediante html o javascript o cualquier otro lenguaje.

Tengo una tabla y lo que quiero es que las filas sean enlaces, algo como esta tabla de esta web
http://www.cofjaen.es/empleo.php

espero que podais ayudarme =) gracias!!

TurKa · #2 (**permalink**) 03/06/2010, 12:17

Hola mysterio069!

Podrías resolverlo mediante Javascript con ayuda de CSS, de la siguiente forma:

- Para resaltar las filas al pasar el mouse, cambias el estilo (CSS) llamándolo desde el evento onMouseOver (el mouse pasa por arriba de las filas) y OnMouseOut (el mouse sale de la fila)
- Para convertirlas en enlace al hacer click, mediante el evento onClick rediriges al usuario a la página que desees.

El código resultante sería algo así:

Código Javascript:

Ver original<!-- copiar dentro del tag <head> -->
<script langiage="javascript" type="text/javascript">
// RESALTAR LAS FILAS AL PASAR EL MOUSE
function ResaltarFila(id_fila) {
    document.getElementById(id_fila).style.backgroundColor = '#C0C0C0';
}
 
// RESTABLECER EL FONDO DE LAS FILAS AL QUITAR EL FOCO
function RestablecerFila(id_fila) {
    document.getElementById(id_fila).style.backgroundColor = '#FFFFFF';
}
 
// CONVERTIR LAS FILAS EN LINKS
function CrearEnlace(url) {
    location.href=url;
}
</script>

Luego deberás crear las tablas asignando un ID único a cada fila <tr> y llamar a la función que corresponda con el evento apropiado:

Código HTML:

Ver original<tr id="fila_1" onMouseOver="ResaltarFila('fila_1');" onMouseOut="RestablecerFila('fila_1')" onClick="CrearEnlace('http://www.google.com');">

Espero que te sirva! Aunque seguro, te moverán el post de foro

mysterio069 · #3 (**permalink**) 09/06/2010, 02:53

muchas gracias!! es relamente lo que queria, pero el problema es que la tabla se va creando con un mysql_fetch_row de la base de datos mediante un bucle, por lo que solo me funciona en la primera fila.
Te pongo el codigo del bucle para que veas como lo tengo

Código PHP:

Ver originalwhile($fila=mysql_fetch_row ($consulta)){
$fecha=$fila[0];
$fecha = getdate();
 
?>
<tr id="fila_1" onMouseOver="ResaltarFila('fila_1');" onMouseOut="RestablecerFila('fila_1')" onClick="CrearEnlace('http://www.google.com');">
<td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
<td><?echo $fila[3]; ?></td>
<td><?echo $fila[2]; ?></td>
</tr>
 
<?
}

mysterio069 · #4 (**permalink**) 09/06/2010, 03:01

wooo ya lo arreglee!! jaja

lo que hice fue poner una variable tal que asi:

Código PHP:

Ver original<?
$variable=0;
while($fila=mysql_fetch_row ($consulta)){
$fecha=$fila[0];
$fecha = getdate();
 
?>
<tr id="fila_<? echo $variable ?>" onMouseOver="ResaltarFila('fila_<? echo $variable ?>');" onMouseOut="RestablecerFila('fila_<? echo $variable ?>')" onClick="CrearEnlace('http://www.google.com');">
<td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
<td><?echo $fila[3]; ?></td>
<td><?echo $fila[2]; ?></td>
</tr>
 
<?
$variable++;
}
?>

la variable se va incrementando y ya me hace todas las filas!

Muxas gracias de nuevo!!!

TurKa · #5 (**permalink**) 09/06/2010, 09:09

Hola! Me alegro que te haya servido.
Para solucionar el problema por el tema de las filas dinámicas, lo que deberías hacer es lo siguiente:

Código HTML:

Ver original<tr id="fila_<?echo $fila['id_registro']; ?>" onMouseOver="ResaltarFila('fila_<?echo $fila['id_registro']; ?>');" onMouseOut="RestablecerFila('fila_<?echo $fila['id_registro']; ?>')" onClick="CrearEnlace('<?echo $fila['link']; ?>');">
<td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
<td><?echo $fila[3]; ?></td>
<td><?echo $fila[2]; ?></td>
</tr>

Reemplazando 'id_registro' por el número que corresponda al campo ID (o similar) del registro. Ejemplo: <?echo $fila[0]; ?>
Y 'link' por el número de campo donde almacenás el enlace. Ejemplo: <?echo $fila[12]; ?>

Saludos!!

TurKa · #6 (**permalink**) 09/06/2010, 09:09

Ay! Disculpas! Me mandé a responder sin darme cuenta que ya lo habías solucionado. Perdón :-$

krusty32 · #7 (**permalink**) 09/07/2010, 05:50

y se podria hacer que te las marcara como visitadas? no se si me explico, me refiero a que cuando clickes en una de las filas al volver al listado esta estuviese marcada como visited.

Yo lo tengo echo de una forma parecida a lo que habeis posteado, pero sin ID:

<tr onclick="xxxx" onMouseOver="MarkColumn(this,'#FFF2B6');" onMouseOut="UnMarkColumn(this,'<?echo $color?>');" >

y tengo definidas las siguientes funciones js
//marcar fila
function MarkColumn(tr,color){
tr.style.cursor='pointer';
tr.bgColor=color;
}

//Desmarcar fila
function UnMarkColumn(tr,color){
tr.style.cursor='default';
tr.bgColor=color;
}

Un saludo

TurKa · #8 (**permalink**) 09/07/2010, 13:31

Cita:

Iniciado por krusty32

y se podria hacer que te las marcara como visitadas? no se si me explico, me refiero a que cuando clickes en una de las filas al volver al listado esta estuviese marcada como visited.

Sí. Se podría, aunque no hay un método específico para eso. Depende de "encontrarle la vuelta".

La forma más sencilla, sería que los links se abran en nueva venta, y ante el evento OnClick tras llamar a CrearEnlace() llames a una función similar a ResaltarFila(id_fila) pero dándole otro color de fondo y de fuente por ejemplo (el color de fuente se cambiaría mediante document.getElementById(id_fila).style.color = 'codigo_De_color';). Pero en este caso, si referescaras la página volverías a empezar.

Una forma menos sencilla, sería tomando la forma sencilla, pero guardando una cookie que almacene el ID de las filas visitadas, en un array, por ejemplo, para que te mantenga el cambio incluso tras refrescar la página. En este caso, deberías crear dos nuevas funciones:
1) Que te guarde la cookie indicando que la fila ha sido visitada (a la cual llamarás desde el evento onClick)
2) Otra función, que:
a. se fije si la cookie existe
b. en caso de existir, recorra los valores del array (con un for) y si al comparar los valores del array con los ID de cada fila, cada vez que encuentre una igualdad, llame a la nueva función que se encarga de colorear las filas visitadas
c. llamar a esta función tras la carga de la página con window.onload=funcion;

Todo depende de evaluar cual sería la opción más viable sobre la base de lo que se necesita.

emprear · #9 (**permalink**) 09/07/2010, 16:34

Turka:

A lo tuyo yo le llamo "precisión"
Felicitaciones !!!

skyz · #10 (**permalink**) 17/08/2010, 12:13

holas Turka tengo unas 2 dudas, te agradeceria mucho si me respondieras

Hice el ejemplo que pusiste para las filas con enlaces, aqui esta:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
// RESALTAR LAS FILAS AL PASAR EL MOUSE
function ResaltarFila(id_fila) {
    document.getElementById(id_fila).style.backgroundColor = '#C0C0C0';
}
 
// RESTABLECER EL FONDO DE LAS FILAS AL QUITAR EL FOCO
function RestablecerFila(id_fila) {
    document.getElementById(id_fila).style.backgroundColor = '#FFFFFF';
}
 
// CONVERTIR LAS FILAS EN LINKS
function CrearEnlace(url) {
    document.location=url;
}
</script>

</head>

<body>
<table width="331" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
  <tr id="fila1" onmouseover="ResaltarFila('fila1');" onmouseout="RestablecerFila('fila1')" onclick="CrearEnlace('http://www.google.com');">
    <td width="41"><div align="center">uno </div></td>
    <td width="119"><div align="center">lolo</div></td>
    <td width="79"><div align="center">lolo</div></td>
    <td width="64"><div align="center">lolo</div></td>
  </tr>
  <tr id="fila2" onmouseover="ResaltarFila('fila2');" onmouseout="RestablecerFila('fila2')" onclick="CrearEnlace('http://www.google.com');">
    <td><div align="center">dos</div></td>
    <td><div align="center">janeth</div></td>
    <td><div align="center">janeth</div></td>
    <td><div align="center">janeth</div></td>
  </tr>
  <tr id="fila3" onmouseover="ResaltarFila('fila3');" onmouseout="RestablecerFila('fila3')" onclick="CrearEnlace('http://www.google.com');">
    <td><div align="center">tres</div></td>
    <td><div align="center">gata</div></td>
    <td><div align="center">gata</div></td>
    <td><div align="center">gata</div></td>
  </tr>
</table>
</body>
</html>

Pero cuando selecciono alguna fila, solo me aparece el puntero del mouse y no la manito que hace referencia a un enlace, como se logra eso. En la pagina http://www.cofjaen.es/empleo.php de arriba aparece la manito al seleccionar una fila de la tabla.

Como logro que cuando presione una determinada fila se abre en una nueva pagina, no en la misma se hace con _blank pero nose donde ponerlo.

emprear · #11 (**permalink**) 17/08/2010, 12:39

skyz:

Aplicando la propiedad css cursor al elemento que designes

por ejemplo

Código CSS:

Ver originaltr{
cursor: pointer;
}

Saludos

skyz · #12 (**permalink**) 17/08/2010, 13:27

Muchas gracias por la respuesta emprear, no se usar mucho css, pero lo logre hacer funcionar con tu ayuda, no conocia es propiedad.
Una ultima cosa como puedo abrir en una nueva ventana, cuando apreto en los enlaces de cada fila.
???????????

emprear · #13 (**permalink**) 17/08/2010, 13:52

skyz:

mira el código que sigue, el evento onclick abre la ventana y la centra en la pantalla, crea tambien una página de nombre flash.html con cualquier contenido para verificar el funcionamiento. 400 y 400 son elñ ancho y alto respectivamente.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<script type="text/javascript">
var win= null;
function VentanaCentrada(pagina,w,h,nombre){
var winleft = (screen.width-w)/2;
var wintop = (screen.height-h)/2;
caracteristicas='height='+h+',width='+w+',top='+wintop+',left='+winleft+',scrollbars=no,toolbar=no,resizable=yes'
win=window.open(pagina,nombre,caracteristicas)
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
// -->
</script>
</head>
<body>
<a href="flash.html" onclick="VentanaCentrada('flash.html','400','400','Popupuno');return false;" > Abrir Popup </a>
</body>
</html>

Saludos