Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Iluminar y marcar celda al pasar con el raton en una tabla.

Estas en el tema de Iluminar y marcar celda al pasar con el raton en una tabla. en el foro de Frameworks JS en Foros del Web. Hola, tengo una tabla en la cúal listo resultados de la base de datos y quisiera saber si se puede hacer que al pasar el ...
  #1 (permalink)  
Antiguo 23/11/2012, 11:14
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Iluminar y marcar celda al pasar con el raton en una tabla.

Hola, tengo una tabla en la cúal listo resultados de la base de datos y quisiera saber si se puede hacer que al pasar el raton por la celda se ilumine y se seleccione al pulsarle ya que que tiene un input tipo radio.

Código PHP:
<table width="100%"  border="1" class="table-dg-grid" >
<tr>
<tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
                    <th><span title="selecc">Selecc.</span></th>
                    <th><span title="num_aparato">NºAparato</span></th>
                    <th><span title="aparato">Aparato</span></th>
                    <th><span title="marca">Marca</span></th>
                    <th><span title="modelo">Modelo</span></th> 
                    <th><span title="num_serie">NºSerie</span></th>
                    <th><span title="num_producto">Cod/12nc</span></th> 
</tr>

<?php do { ?>
<tr class="tbSubHeader1">    
<th><input name="s" type="radio" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th>    
<th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th>    
<th><?php echo $row_ap_usuarios['APARATO']; ?></th>    
<th><?php echo $row_ap_usuarios['MARCA']; ?></th>    
<th><?php echo $row_ap_usuarios['MODELO']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>        
</tr>
<?php } while ($row_ap_usuarios mysql_fetch_assoc($ap_usuarios)); ?>
<caption class="tb1CaptionBottom"></caption>
</table>
Gracias y un saludo
  #2 (permalink)  
Antiguo 23/11/2012, 15:43
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 8 años, 8 meses
Puntos: 57
Información Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Hola satjaen, que tal.
Cita:
Iniciado por satjaen Ver Mensaje
(...) quisiera saber si se puede (...)
Si se puede!
Cita:
Iniciado por satjaen Ver Mensaje
que al pasar el raton por la celda se ilumine
Ese "se ilumine" , podemos traducirlo como: que cambie de color a uno más bonito con la pseudo-clase :hover.

Ejemplo CSS:
Código CSS:
Ver original
  1. table tr:hover {background-color:greenyellow} /*para la fila*/
  2. /*... o si solo se desea ...*/
  3. table tr td:hover {background-color:greenyellow} /*para la celda*/
Cita:
Iniciado por satjaen Ver Mensaje
y se seleccione al pulsarle ya que que tiene un input tipo radio.
Ese "se seleccione" , podemos traducirlo como: que al hacerle click obtenga un nuevo color (distinto al usado en :hover) que represente su estado de seleccionado como también el input[type="checkbox"] presente.

Ahi ya estamos en el territorio de Javascript y como estamos el el foro 127 usaremos JQuery.

Código Javascript:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Documento sin título</title>
  6. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  7. <script>
  8. $(document).on('ready', function(){
  9.     $('#list .row').on({
  10.         click: function(){
  11.             var $checkbox = $(this).find('.check');
  12.             if ($checkbox.prop('checked')) {
  13.                 $checkbox.prop('checked', false);
  14.                 $(this).removeClass('selected')
  15.             } else {
  16.                 $checkbox.prop('checked', true);
  17.                 $(this).addClass('selected')
  18.             }
  19.         },
  20.         mouseenter: function(){$(this).addClass('over')},
  21.         mouseleave: function(){$(this).removeClass('over')}
  22.     });
  23.     $('#list .row .check').on('click', function(event){
  24.         event.stopPropagation();
  25.         $(this).parents('.row').toggleClass('selected');
  26.     });
  27. });
  28. </script>
  29. <style>
  30. table {border-collapse:collapse;border-spacing:0}
  31. th, td {border:1px solid black;cursor:default}
  32. .row.over {background-color:#E7E7E7}
  33. .row.selected {background-color:#0072C6;color:white}
  34. </style>
  35. </head>
  36.  
  37. <body>
  38. <table id="list">
  39.   <thead>
  40.     <tr>
  41.       <th>*</td>
  42.       <th>Name</td>
  43.     </tr>
  44.   </thead>
  45.   <tbody>
  46.     <tr class="row">
  47.       <td><input type="checkbox" class="check"></td>
  48.       <td>gebremswar</td>
  49.     </tr>
  50.     <tr class="row">
  51.       <td><input type="checkbox" class="check"></td>
  52.       <td>satjaen</td>
  53.     </tr>
  54.   </tbody>
  55. </table>
  56. </body>
  57. </html>

Quizá quede algunas cosas por ajustar debido al contenido dinámico. Pero básicamente es lo que deseas realizar.

Así mismo, podrías obviar las lineas 20 y 21 del código que he compartido y utilizar en su lugar las reglas CSS que puse de ejemplo en la segunda respuesta que escribí lineas más arriba con el fin de no ocupar JQuery en algo tan simple que se puede manejar con CSS.

Cita:
Iniciado por satjaen Ver Mensaje
Gracias y un saludo
Saludos igualmente y coméntanos cualquier duda.
  #3 (permalink)  
Antiguo 23/11/2012, 16:01
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Muchas gracias por tu tiempo, pruebo y comento.
Un saludo
  #4 (permalink)  
Antiguo 23/11/2012, 18:08
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

@gebremswar, no me sale. He puesto esto y no se si puede ser por el contenido dinámico:
Código Javascript:
Ver original
  1. <script>
  2. $(document).on('ready', function(){
  3. * * $('#list .row').on({
  4. * * * * click: function(){
  5. * * * * * * var $checkbox = $(this).find('.check');
  6. * * * * * * if ($checkbox.prop('checked')) {
  7. * * * * * * * * $checkbox.prop('checked', false);
  8. * * * * * * * * $(this).removeClass('selected')
  9. * * * * * * } else {
  10. * * * * * * * * $checkbox.prop('checked', true);
  11. * * * * * * * * $(this).addClass('selected')
  12. * * * * * * }
  13. * * * * },
  14. * * * * mouseenter: function(){$(this).addClass('over')},
  15. * * * * mouseleave: function(){$(this).removeClass('over')}
  16. * * });
  17. * * $('#list .row .check').on('click', function(event){
  18. * * * * event.stopPropagation();
  19. * * * * $(this).parents('.row').toggleClass('selected');
  20. * * });
  21. });
  22. </script>
  23. <style>
  24. th, td {cursor:default}
  25. .row {
  26.     color: #000;
  27.     font-size: 10px;
  28. }
  29. .row.over {background-color:#E7E7E7}
  30. .row.selected {background-color:#0072C6;color:white}
  31. </style>
Código Javascript:
Ver original
  1. <table width="100%" id="list"  border="1" class="table-dg-grid" >
  2. <thead>
  3. <tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  4. <th><span title="selecc">Selecc.</span></th>
  5. <th><span title="num_aparato">NºAparato</span></th>
  6. <th><span title="aparato">Aparato</span></th>
  7. <th><span title="marca">Marca</span></th>
  8. <th><span title="modelo">Modelo</span></th>
  9. <th><span title="num_serie">NºSerie</span></th>
  10. <th><span title="num_producto">Cod/12nc</span></th>
  11. </tr>
  12.  </thead>
  13. <?php do { ?>
  14. <tr class="row">   
  15. <th><input name="s" type="checkbox" class="check" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th> 
  16. <th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th>
  17. <th><?php echo $row_ap_usuarios['APARATO']; ?></th>
  18. <th><?php echo $row_ap_usuarios['MARCA']; ?></th>  
  19. <th><?php echo $row_ap_usuarios['MODELO']; ?></th>
  20. <th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>
  21. <th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>       
  22. </tr>
  23. <?php } while ($row_ap_usuarios = mysql_fetch_assoc($ap_usuarios)); ?>
  24. <caption class="tb1CaptionBottom"></caption>
  25. </table>

Gracias
  #5 (permalink)  
Antiguo 24/11/2012, 07:04
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 8 años, 8 meses
Puntos: 57
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Hola nuevamente satjaen.

Cita:
Iniciado por satjaen Ver Mensaje
@gebremswar, no me sale ....
En realidad ya lo sabía . Si probaste el ejemplo de mi mensaje anterior con contenido estático podrás darte cuenta que funciona perfectamente, pero el detalle está en ..........

Cita:
Iniciado por satjaen Ver Mensaje
(...) no se si puede ser por el contenido dinámico:
Así es, lo ocasiona el contenido dinámico. Y esto es porque los elementos con clase ".row" aun no están presentes cuando el "ready" de jquery se ejecutó y comprobó que el DOM ha sido cargado y puede ser manipulado.

Es entonces que debemos definir selectores a partir de los presentes en el contenido estático. Por ejemplo podemos hacer referencia al body ya que sabes que esta presente en el contenido estático y partir de allí definir los descendientes que dispararán el evento.

Pero para este ejemplo que compartiré, no hace falta ir tan "arriba" en busca del padre que estará presente como es el caso de <body>. Ya que podemos definir un id en la tabla y a partir de el crearemos nuestro selector.

Código Javascript:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>@GBreagan</title>
  6. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  7. <script>
  8. $(document).on('ready', function(){
  9.     $('#list').on('click', '.row', function(){
  10.         var $checkbox = $(this).find('.check');
  11.         if ($checkbox.prop('checked')) {
  12.             $checkbox.prop('checked', false);
  13.             $(this).removeClass('selected')
  14.         } else {
  15.             $checkbox.prop('checked', true);
  16.             $(this).addClass('selected')
  17.         }
  18.     });
  19.     $('#list').on('click', '.row .check', function(event){
  20.         event.stopPropagation();
  21.         $(this).parents('.row').toggleClass('selected');
  22.     });
  23.     //Esto solo es de ejemplo para agregar contenido dinámico
  24.     $('#add').on('click', function(){
  25.         $('#list tbody').append('<tr class="row"><td><input type="checkbox" class="check"></td><td>fdw</td></tr>');
  26.     });
  27. });
  28. </script>
  29. <style>
  30. table {border-collapse:collapse;border-spacing:0}
  31. th, td {border:1px solid black;cursor:default}
  32. .row:hover {background-color:#E7E7E7}
  33. .row.selected {background-color:#0072C6;color:white}
  34. </style>
  35. </head>
  36. <body>
  37. <input type="button" value="add row" id="add">
  38. <table id="list">
  39.   <thead>
  40.     <tr>
  41.       <th>*</td>
  42.       <th>Name</td>
  43.     </tr>
  44.   </thead>
  45.   <tbody>
  46.     <tr class="row">
  47.       <td><input type="checkbox" class="check"></td>
  48.       <td>gebremswar</td>
  49.     </tr>
  50.     <tr class="row">
  51.       <td><input type="checkbox" class="check"></td>
  52.       <td>satjaen</td>
  53.     </tr>
  54.   </tbody>
  55. </table>
  56. </body>
  57. </html>
Como puedes observar el cambio es mínimo (bueno, eliminé también los eventos mouseenter y mouseleave por lo que te comenté en el mensaje anterior).

En el ejemplo se puede apreciar como se asocia el selector dentro del propio cuerpo de la función para especificar el desentiende que disparará el evento. Para nuestro caso la clase .row a partir de su padre #list. Y para el checkbox ".row .check".

<!-- edit-->
Casi lo olvido. Es posible que en otros lugares (foros o blog's) encuentres solución al pequeño inconveniente descrito en este mensaje, referente al contenido dinámico, tratado con el método .live() de JQuery. Y es por eso que te dejo un articulo el cual recomienda no utilizarlo: Porqué no debemos usar nunca jQuery Live
<!--/edit-->

Cita:
Iniciado por satjaen Ver Mensaje
Gracias
De nada

Última edición por gebremswar; 24/11/2012 a las 07:21
  #6 (permalink)  
Antiguo 24/11/2012, 12:54
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Otra vez gracias, pocos en este foro y en otros se toman tanto tiempo en explicar cosas que para los que se dedican íntegramente a la programación son sencillas pero para los que empezamos son tan difíciles. Es de agradecer, repito.
Pruebo y comento.
Un saludo
  #7 (permalink)  
Antiguo 25/11/2012, 13:02
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

@gebremswar, he estado probando tú código que funciona my bien pero es para agregar contenido dinámico y no me sirve para lo que intento hacer.
Un saludo.
  #8 (permalink)  
Antiguo 26/11/2012, 00:52
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 8 años, 8 meses
Puntos: 57
Información Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Cita:
Iniciado por satjaen Ver Mensaje
@gebremswar, he estado probando tú código que funciona my bien pero es para agregar contenido dinámico y no me sirve para lo que intento hacer.
Un saludo.


En realidad si te sirve, ya que sirve tanto con contenido dinámico como estático. Pero más claro creo que no te puedo explicar.

Quizá puedas ser más específico y explicarnos porque no te sirve, en que falla al agregarloa tu aplicación (errores de javascript) estas usando firebug para revisar los posibles errores, etc.

Puse un boton add row que permite "agregar contenido dinámico" haciendo de ejemplo a lo que podría ser un php que trae contenido traído por ajax asíncronamente. Es un ejemplo simple pero que basta para explicar lo que necesitas básicamente.

Vuelvo a repetir, estoy especificando mi id #list que esta presente en el html estático y partir de ahi a los descendientes dinámicos y (...) ya no continúo porque repetiría mi mensaje anterior

Por favor lee atentamente el mensaje anterior, solo necesitas entender lo que expliqué ahí y podrás aplicar lo aprendido a lo que deseas realizar.

<!-- edit-->
Otro dato adicional, el método .on() de JQuery esta disponible a partir de la version 1.7.
<!--/edit-->

Última edición por gebremswar; 26/11/2012 a las 01:00
  #9 (permalink)  
Antiguo 26/11/2012, 08:41
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Ok, lo intentaré pero no tengo muchos conocimientos de php, javascript, etc...
Gracias de nuevo.
  #10 (permalink)  
Antiguo 27/11/2012, 09:01
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

Bueno, ya he podido ponerme y lo he sacado. Ahora quiero que debajo de la tabla:
Código Javascript:
Ver original
  1. <table width="100%"  id="list" border="1" class="aparatos4"  >
  2. <thead>
  3. <tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  4. <th><span title="selecc">Selecc.</span></th>
  5. <th><span title="num_aparato">NºAparato</span></th>
  6. <th><span title="aparato">Aparato</span></th>
  7. <th><span title="marca">Marca</span></th>
  8. <th><span title="modelo">Modelo</span></th>
  9. <th><span title="num_serie">NºSerie</span></th>
  10. <th><span title="num_producto">Cod/12nc</span></th>
  11. </tr>
  12.  </thead>
  13. <?php do { ?>
  14. <tr class="row" >  
  15. <th><input name="s" type="checkbox" class="check" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th> 
  16. <th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th>
  17. <th><?php echo $row_ap_usuarios['APARATO']; ?></th>
  18. <th><?php echo $row_ap_usuarios['MARCA']; ?></th>  
  19. <th><?php echo $row_ap_usuarios['MODELO']; ?></th>
  20. <th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>
  21. <th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>       
  22. </tr>
  23. <?php } while ($row_ap_usuarios = mysql_fetch_assoc($ap_usuarios)); ?>
  24. <caption class="tb1CaptionBottom"></caption>
  25. </table>
Al hacer click en el checkbox se me rellenen las cajas de texto de la fila seleccionada:

Código Javascript:
Ver original
  1. <table width="100%">
  2.   <tr>
  3.     <td>Aparato</td>
  4.     <td><input name="aparato" type="text" /></td>
  5.     <td>Modelo</td>
  6.     <td><input name="modelo" type="text" /></td>
  7.     <td>NºSerie</td>
  8.     <td><input name="modelo" type="text" /></td>
  9.   </tr>
  10.   <tr>
  11.     <td>Marca</td>
  12.     <td><input name="marca" type="text" /></td>
  13.     <td>Cod/12Nc</td>
  14.     <td><input name="NUM_PRODUCTO" type="text" /></td>
  15.     <td>Revisión</td>
  16.     <td><input name="revision" type="text" /></td>
  17.   </tr>
  18. </table>

Gracias por vuestro tiempo.
  #11 (permalink)  
Antiguo 27/11/2012, 11:05
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Iluminar y marcar celda al pasar con el raton en una tabla.

@gebremswar, quería preguntarte como podría hacer una vez que he añadido contenido dinámico a una fila insertarlo en la base de datos. Es decir, relleno los campos :

Código Javascript:
Ver original
  1. $('#add').on('click', function(){
  2. $('#list tbody').append('<tr class="row"><td><input type="checkbox" class="check"></td><td><input type="hidden" name="num_aparato"></td><td><input type="text" name="aparato"></td><td><input type="text" name="marca"></td><td><input type="text" name="modelo"><td><input type="text" name="NUM_SERIE"></td><td><input type="text" name="NUM_PRODUCTO"></td></tr>');
  3.  });

Y como los envio a la base de datos?
Un saludo.

Etiquetas: celda, iluminar, input, marcar, php, raton
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 13:41.