Foros del Web » Creando para Internet » HTML »

filas de una tabla como enlaces

Estas en el tema de filas de una tabla como enlaces en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/06/2010, 03:21
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 13 años, 11 meses
Puntos: 0
filas de una tabla como enlaces

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!!
  #2 (permalink)  
Antiguo 03/06/2010, 12:17
Avatar de TurKa  
Fecha de Ingreso: enero-2003
Ubicación: Gerli, Avellaneda
Mensajes: 543
Antigüedad: 21 años, 2 meses
Puntos: 4
Respuesta: filas de una tabla como enlaces

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
  1. <!-- copiar dentro del tag <head> -->
  2. <script langiage="javascript" type="text/javascript">
  3. // RESALTAR LAS FILAS AL PASAR EL MOUSE
  4. function ResaltarFila(id_fila) {
  5.     document.getElementById(id_fila).style.backgroundColor = '#C0C0C0';
  6. }
  7.  
  8. // RESTABLECER EL FONDO DE LAS FILAS AL QUITAR EL FOCO
  9. function RestablecerFila(id_fila) {
  10.     document.getElementById(id_fila).style.backgroundColor = '#FFFFFF';
  11. }
  12.  
  13. // CONVERTIR LAS FILAS EN LINKS
  14. function CrearEnlace(url) {
  15.     location.href=url;
  16. }
  17. </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
  1. <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
__________________
Programación LAMP con Scrum y XP
www.eugeniabahit.com.com.ar
  #3 (permalink)  
Antiguo 09/06/2010, 02:53
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: filas de una tabla como enlaces

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 original
  1. while($fila=mysql_fetch_row ($consulta)){
  2. $fecha=$fila[0];
  3. $fecha = getdate();
  4.  
  5. ?>
  6. <tr id="fila_1" onMouseOver="ResaltarFila('fila_1');" onMouseOut="RestablecerFila('fila_1')" onClick="CrearEnlace('http://www.google.com');">
  7. <td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
  8. <td><?echo $fila[3]; ?></td>
  9. <td><?echo $fila[2]; ?></td>
  10. </tr>
  11.  
  12. <?
  13. }
  #4 (permalink)  
Antiguo 09/06/2010, 03:01
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: filas de una tabla como enlaces

wooo ya lo arreglee!! jaja

lo que hice fue poner una variable tal que asi:
Código PHP:
Ver original
  1. <?
  2. $variable=0;
  3. while($fila=mysql_fetch_row ($consulta)){
  4. $fecha=$fila[0];
  5. $fecha = getdate();
  6.  
  7. ?>
  8. <tr id="fila_<? echo $variable ?>" onMouseOver="ResaltarFila('fila_<? echo $variable ?>');" onMouseOut="RestablecerFila('fila_<? echo $variable ?>')" onClick="CrearEnlace('http://www.google.com');">
  9. <td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
  10. <td><?echo $fila[3]; ?></td>
  11. <td><?echo $fila[2]; ?></td>
  12. </tr>
  13.  
  14. <?
  15. $variable++;
  16. }
  17. ?>

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

Muxas gracias de nuevo!!!
  #5 (permalink)  
Antiguo 09/06/2010, 09:09
Avatar de TurKa  
Fecha de Ingreso: enero-2003
Ubicación: Gerli, Avellaneda
Mensajes: 543
Antigüedad: 21 años, 2 meses
Puntos: 4
Respuesta: filas de una tabla como enlaces

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
  1. <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']; ?>');">
  2. <td><? echo $fecha["mday"]."/".$fecha["mon"]."/".$fecha["year"]; ?></td>
  3. <td><?echo $fila[3]; ?></td>
  4. <td><?echo $fila[2]; ?></td>
  5. </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!!
__________________
Programación LAMP con Scrum y XP
www.eugeniabahit.com.com.ar
  #6 (permalink)  
Antiguo 09/06/2010, 09:09
Avatar de TurKa  
Fecha de Ingreso: enero-2003
Ubicación: Gerli, Avellaneda
Mensajes: 543
Antigüedad: 21 años, 2 meses
Puntos: 4
Respuesta: filas de una tabla como enlaces

Ay! Disculpas! Me mandé a responder sin darme cuenta que ya lo habías solucionado. Perdón :-$
__________________
Programación LAMP con Scrum y XP
www.eugeniabahit.com.com.ar
  #7 (permalink)  
Antiguo 09/07/2010, 05:50
 
Fecha de Ingreso: noviembre-2003
Mensajes: 3
Antigüedad: 20 años, 4 meses
Puntos: 0
Respuesta: filas de una tabla como enlaces

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
  #8 (permalink)  
Antiguo 09/07/2010, 13:31
Avatar de TurKa  
Fecha de Ingreso: enero-2003
Ubicación: Gerli, Avellaneda
Mensajes: 543
Antigüedad: 21 años, 2 meses
Puntos: 4
Respuesta: filas de una tabla como enlaces

Cita:
Iniciado por krusty32 Ver Mensaje
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.

__________________
Programación LAMP con Scrum y XP
www.eugeniabahit.com.com.ar

Última edición por TurKa; 09/07/2010 a las 13:33 Razón: errores de tipeo
  #9 (permalink)  
Antiguo 09/07/2010, 16:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: filas de una tabla como enlaces

Turka:

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

  #10 (permalink)  
Antiguo 17/08/2010, 12:13
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 13 años, 11 meses
Puntos: 1
Exclamación Respuesta: filas de una tabla como enlaces

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.
  #11 (permalink)  
Antiguo 17/08/2010, 12:39
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: filas de una tabla como enlaces

skyz:

Aplicando la propiedad css cursor al elemento que designes

por ejemplo
Código CSS:
Ver original
  1. tr{
  2. cursor: pointer;
  3. }


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 17/08/2010, 13:27
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: filas de una tabla como enlaces

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.
???????????
  #13 (permalink)  
Antiguo 17/08/2010, 13:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: filas de una tabla como enlaces

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: enlaces, filas, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:52.