• Facebook
  • Google Plus
  • Delphiaccess Feed
  • Twitter
  • YouTube


Autor Tema: [RESUELTO] problema con javascript al pasar el mouse sobre registros listados  (Leído 619 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado matteomatico

  • Usuario Activo
  • ***
  • Gracias
  • -Dados: 1
  • -Recibidos: 0
  • Mensajes: 30
  • Calificaciones: +0/-0
  • Sexo: Masculino
a traves del curso "VideoTutorial 8 del Curso de PHP POO" tome de referencia, cree un documento el cual lista usuarios y a traves del un javascript al pasar el mouse debiera oscurecer lo seleccionado...
 el archivo funciona y lista los usuarios...
"el problema es que me resulta el codigo pero solo logro que se oscuresca el primer registro..."

haber si me puden ayudar, aqui pego el codigo ...

el documento javascript se llama funciones.js
-------------------------------------------------------------------------------------------------------------
CODIGO JAVASCRIPT
-------------------------------------------------------------------------------------------------------------

Código TEXT
  1. // JavaScript Document
  2.  
  3. function cambiar(id,color)
  4. {
  5.  
  6. document.getElementById(id).style.backgroundColor=color;
  7. }
  8.  

---------------------------------------------------------------------------------------------------------------
CODIGO PHP
---------------------------------------------------------------------------------------------------------------

Código PHP
  1. <?php
  2. require_once ("class/class.php");
  3.  
  4. ?>
  5. <html>
  6. <head>
  7. <!-- permite e indica al php y al htm que tipo de cotejamiento trabajaremos-->
  8. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  9.  
  10. <title>
  11. Listado De Usuarios
  12. </title>
  13. <script type="text/javascript" language="javascript" src="js/funciones.js"></script>
  14. </head>
  15. <body>
  16. <center><h1>Lista de Usuarios</h1></center>
  17.  
  18. <table align="center">
  19.  
  20. <tr style="background-Color:#cccccc">
  21. <td valign="top" align="Left" width"150">Nombre</td>
  22. <td valign="top" align="Center" width"150">Apellidos</td>
  23. <td valign="top" align="Center" width"150">Direccion</td>
  24. <td valign="top" align="Center" width"150">Teléfono</td>
  25. <td valign="top" align="Center" width"150">Celuar</td>
  26. </tr>
  27. <?php
  28. //instancia de la clase insertar
  29. $tra=new Trabajo();
  30. $usuario=$tra->get_usuarios();
  31. for($i=0;$i<count($usuario);$i  )
  32. {?>
  33. <tr id="<?php echo "ide_&i";?>" style="background-color:#f0f0f0" onMouseMove= "cambiar('<?php echo "ide_&i";?>','#cccccc')"
  34. onMouseOut="cambiar('<?php echo "ide_&i";?>','#f0f0f0')">
  35.  
  36. <td valign="top" align="left" width="150">
  37. <?php
  38. echo $usuario[$i]["USU_NOMBRES"];
  39. ?>
  40. </td>
  41.  
  42. <td valign="top" align="Center" width="150">
  43. <?php
  44. $apellidos=$usuario[$i]["USU_APELLIDO_PATERNO"]." ".$usuario[$i]["USU_APELLIDO_MATERNO"];
  45. echo $apellidos;
  46. ?>
  47. </td>
  48.  
  49. <td valign="top" align="Center" width="150">
  50. <?php
  51. echo $usuario[$i]["USU_DIRECCION"];
  52. ?>
  53. </td>
  54.  
  55. <td valign="top" align="Center" width="150">
  56. <?php
  57. echo $usuario[$i]["USU_FONO"];
  58. ?>
  59. </td>
  60.  
  61. <td valign="top" align="Center" width="150">
  62. <?php
  63. echo $usuario[$i]["USU_CELULAR"];
  64. ?>
  65. </td>
  66.  
  67. </tr>
  68. <?php
  69. }
  70. ?>
  71. </table></body></html>
« última modificación: 09 de Junio de 2012, 11:46:58 por enecumene »



Conectado enecumene

  • Administrador
  • ******
  • Gracias
  • -Dados: 345
  • -Recibidos: 289
  • Mensajes: 5,578
  • Calificaciones: +349/-1
  • Sexo: Masculino
  • DA Webmaster
Re: problema con javascript al pasar el mouse sobre registros listados
« Respuesta #1 en: 09 de Junio de 2012, 11:43:27 »
Es mejor usar CSS sobre Javascript, ¿Y si el usuario tiene deshabilitado javascript en el navegador?, ¡Dejará de funcionar!, prueba usando así:

CSS

Código CSS
  1. tr.cambiar {
  2.   background-color: #F0F0F0;
  3. }
  4.  
  5. tr.cambiar:hover {
  6.   background-color: #CCCCCC;
  7. }

Y lo aplicas así:

Código PHP
  1. <?php
  2. //instancia de la clase insertar
  3. $tra=new Trabajo();
  4. $usuario=$tra->get_usuarios();
  5. for($i=0;$i<count($usuario);$i  )
  6. {?>
  7. <tr id="<?php echo "ide_&i";?>" class="cambiar">
  8. ...
  9.  

Verás que le he asignado una clase a la fila, ya con eso debe funcionarte mi estimado.

Saludos.

Desconectado matteomatico

  • Usuario Activo
  • ***
  • Gracias
  • -Dados: 1
  • -Recibidos: 0
  • Mensajes: 30
  • Calificaciones: +0/-0
  • Sexo: Masculino
Re: problema con javascript al pasar el mouse sobre registros listados
« Respuesta #2 en: 09 de Junio de 2012, 23:40:43 »
mil gracias lo probare!

Desconectado matteomatico

  • Usuario Activo
  • ***
  • Gracias
  • -Dados: 1
  • -Recibidos: 0
  • Mensajes: 30
  • Calificaciones: +0/-0
  • Sexo: Masculino
Re: problema con javascript al pasar el mouse sobre registros listados
« Respuesta #3 en: 10 de Junio de 2012, 01:03:53 »
GRACIAS RESULTO!!!

Desconectado matteomatico

  • Usuario Activo
  • ***
  • Gracias
  • -Dados: 1
  • -Recibidos: 0
  • Mensajes: 30
  • Calificaciones: +0/-0
  • Sexo: Masculino
Re: problema con javascript al pasar el mouse sobre registros listados
« Respuesta #4 en: 12 de Junio de 2012, 20:04:33 »
SE ME OLVIDABA PERDON!
AQUI EL CODIGO SOLUCIONADO CON EL CSS Y PHP

-----
PHP
------

Código PHP
  1. <?php
  2. require_once ("class/class.php");
  3. ?>
  4. <html>
  5. <head>
  6. <!-- permite e indica al php y al htm que tipo de cotejamiento trabajaremos-->
  7. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  8.  
  9. <title>
  10. Listado De Usuarios
  11. </title>
  12. <!-- javascript-->
  13. <!-- <script type="text/javascript" language="javascript" src="js/funciones.js"></script> -->
  14. <link href="css/estilos.css" type="text/css" rel="stylesheet" />
  15. </head>
  16. <body>
  17. <center><h1>Lista de Usuarios</h1></center>
  18.  
  19. <table align="center">
  20.  
  21. <tr style="background-Color:#999999">
  22. <td valign="top" align="Left" width"150">Nombre</td>
  23. <td valign="top" align="Center" width"150">Apellidos</td>
  24. <td valign="top" align="Center" width"150">Direccion</td>
  25. <td valign="top" align="Center" width"150">Telefono</td>
  26. <td valign="top" align="Center" width"150">Celuar</td>
  27. <td valign="top" align="Center" width"50">Editar</td>
  28. <td valign="top" align="Center" width"50">Eliminar</td>
  29. </tr>
  30. <?php
  31. //instancia de la clase insertar
  32. $tra=new Trabajo();
  33. $usuario=$tra->get_usuarios();
  34. for($i=0;$i<count($usuario);$i  )
  35. {?>
  36.  
  37. <tr id="<?php echo "ide_&i";?>" class="cambiar">
  38.  
  39.  
  40. <td valign="top" align="left" width="150">
  41. <?php
  42. echo $usuario[$i]["USU_NOMBRES"];
  43. ?>
  44. </td>
  45.  
  46. <td valign="top" align="Center" width="150">
  47. <?php
  48. $apellidos=$usuario[$i]["USU_APELLIDO_PATERNO"]." ".$usuario[$i]["USU_APELLIDO_MATERNO"];
  49. echo $apellidos;
  50. ?>
  51. </td>
  52.  
  53. <td valign="top" align="Center" width="150">
  54. <?php
  55. echo $usuario[$i]["USU_DIRECCION"];
  56. ?>
  57. </td>
  58.  
  59. <td valign="top" align="Center" width="150">
  60. <?php
  61. echo $usuario[$i]["USU_FONO"];
  62. ?>
  63. </td>
  64.  
  65. <td valign="top" align="Center" width="150">
  66. <?php
  67. echo $usuario[$i]["USU_CELULAR"];
  68. ?>
  69. </td>
  70.  
  71. <td valign="top" align="Center" width="50">
  72. <!-- permitimos hacer referencia al rut del usuario que corresponde y al momento de hacer clic en la imagen redireccione a editar.php
  73.      el javascript se hace para esconder la referencia del rut del usuario para posteriores usos de hackers-->
  74. <a href="javascript:void(0);" onClick="window.location='editar.php?id=<?php echo $usuario[$i]["USU_RUT"];?>';" title="Editar Usuario"><img src="img/editar.jpg" border="0"></a>
  75.  
  76. </td>
  77.  
  78. <td valign="top" align="Center" width="50">
  79. <a href="javascript:void(0);" onClick="windows.location='eliminar.php?id=<?php echo $usuario[$i]["USU_RUT"];?>';" title="Eliminar Usuario"><img src="img/eliminar.jpg" border="0"></a>
  80. </td>
  81.  
  82.  
  83. </tr>
  84. <?php
  85. }
  86. ?>
  87. </table></body></html>

-----
CSS
------

Código CSS
  1. /* CSS Document */
  2.  
  3. tr.cambiar {
  4.       background-color: #F0F0F0;
  5.     }
  6.      
  7.     tr.cambiar:hover {
  8.       background-color: #CCCCCC;
  9.     }
« última modificación: 13 de Junio de 2012, 08:39:32 por enecumene »

Desconectado luis5636

  • Usuario Activo
  • ***
  • Gracias
  • -Dados: 0
  • -Recibidos: 0
  • Mensajes: 18
  • Calificaciones: +0/-0
  • Sexo: Masculino
Re: problema con javascript al pasar el mouse sobre registros listados
« Respuesta #5 en: 29 de Agosto de 2012, 12:01:05 »
Y como hacer, cuando des clic en la fila se quede de otro color tipo como hace el phpmyadmin...