Foros del Web » Creando para Internet » HTML »

Colorear celda con onclick

Estas en el tema de Colorear celda con onclick en el foro de HTML en Foros del Web. Hola a todos, me ha surgido una dudilla y no se como solucionarla, os comento: Tengo una tabla con unas cuantas filas y he hecho ...
  #1 (permalink)  
Antiguo 20/04/2012, 06:49
Avatar de standby82  
Fecha de Ingreso: abril-2011
Mensajes: 29
Antigüedad: 12 años, 11 meses
Puntos: 0
Colorear celda con onclick

Hola a todos, me ha surgido una dudilla y no se como solucionarla, os comento:

Tengo una tabla con unas cuantas filas y he hecho que cuando se pasa el mouse por ellas, cada fila cambia de color y cuando se va el mouse la fila vuelve a su color.

Vale, el problema es que ahora a parte de este efecto quiero conseguir que al darle un clic a la fila esta se quede de un color hasta que se le vueva a dar click.

Es decir tengo que usar los controles onMouseOver, onMouseOut y onClick pero le problema que tengo es que al hacer click me cambia el color, pero al salir el mouse de la tabla se vuelve al estado del onMouseOut. os pongo el codigo:

------------------------------------------------------------------------

<table onMouseOver="this.className='c2'" onMouseOut="this.className='c1'" onclick="this.className='c9'" onclick= table width="1145" align="center" cellspacing="1" class='c5' cellpadding="0" >
<tr>
<td width="984"><table width="116%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class ="c3" width="157" height="84" ><?php echo " ".$nombre;?>
<div align="left"></div></td>
<td class ="c4" width="89" ><?php echo "&nbsp &nbsp Bus ".$bus;?> <div align="left"></div></td>
<td class ="c6"width="336" ><?php echo $comentario;?>
<div align="left"></div></td>
<td class ="c7" width="209" > <?php echo "&nbsp &nbsp".$email;?>
<div align="left"></div></td>
<td class ="c8" width="192" ><?php echo "&nbsp &nbsp".$telefono;?>
<div align="left"></div></td>
</tr>

</table>
</tr>
</table>
-----------------------------------------------------------------------------

Gracias y un saludo
  #2 (permalink)  
Antiguo 20/04/2012, 16:59
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Colorear celda con onclick

esto te puede servir: http://jsfiddle.net/cristian_cena/UzVNf/
  #3 (permalink)  
Antiguo 20/04/2012, 22:02
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: Colorear celda con onclick

@standby82
Podés hacerlo con una combinación de CSS y javascript, cambiando los calssName de las filas

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>resaltar filas</title>
  6. <style type="text/css" media="all">
  7. /*<![CDATA[*/
  8. table{
  9. width: 90%; margin: auto; border-collapse: collapse;
  10. }
  11. td{
  12. border: 1px solid black; cursor:pointer;text-align:center
  13. }
  14. tr.normal td {
  15. background: cyan;
  16. }
  17. tr.normal:hover td{
  18. background: lime;
  19. }
  20. tr.clickeada td {
  21. background: red;
  22. }
  23. /*]]>*/
  24.  
  25. <script type="text/javascript">
  26. //<![CDATA[
  27. // Resaltado de filas y selección - IE7+, FF, Chrome, Opera y Safari
  28. var r;
  29. function marcarFilas(){
  30. r = document.getElementsByTagName('TR');
  31. for(var i=0;i<r.length;i++)
  32. r[i].className = 'normal';
  33. }
  34.  
  35. function seleccionarFilas(laFila){
  36. var c = laFila.className;
  37. var b = laFila.className;
  38.  
  39. laFila.className = b=='normal'||c=='normal'? 'clickeada' : c=='clickeada'? 'normal' : '';
  40. }
  41.  
  42. onload= function() {
  43. marcarFilas();
  44. for(var i=0;i<r.length;i++) {
  45. r[i].onclick = function(){ seleccionarFilas(this); }
  46. }
  47. }
  48. //]]>
  49. </head>
  50. <tr>
  51. <td>contenido</td>
  52. <td>contenido</td>
  53. <td>contenido</td>
  54. </tr>
  55. <tr>
  56. <td>contenido</td>
  57. <td>contenido</td>
  58. <td>contenido</td>
  59. </tr>
  60. <tr>
  61. <td>contenido</td>
  62. <td>contenido</td>
  63. <td>contenido</td>
  64. </tr>
  65. <tr>
  66. <td>contenido</td>
  67. <td>contenido</td>
  68. <td>contenido</td>
  69. </tr>
  70. </body>
  71. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 22/04/2012, 05:49
Avatar de standby82  
Fecha de Ingreso: abril-2011
Mensajes: 29
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Colorear celda con onclick

Muchas gracias a todos , lo probaré

Un saludo

Etiquetas: celda, colorear, onclick, php, tabla
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 22:44.