Foros del Web » Programando para Internet » Javascript »

Problema al cambiar color de tr con javascript

Estas en el tema de Problema al cambiar color de tr con javascript en el foro de Javascript en Foros del Web. Hola! Tengo el siguiente problema, necesito cambiar el color de una fila al al marcar un checkbox,hasta ahorita solo he conseguido marcar el <td> donde ...
  #1 (permalink)  
Antiguo 21/11/2012, 11:26
orenxrei
Invitado
 
Mensajes: n/a
Puntos:
Problema al cambiar color de tr con javascript

Hola!

Tengo el siguiente problema, necesito cambiar el color de una fila al al marcar un checkbox,hasta ahorita solo he conseguido marcar el <td> donde se encuentra el checkbox con el siguiente código, pero si le agrego un parent que seria el que cambiara toda la fila ya no funciona....

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     function cambiar(obj) {
  3.     elem=obj.parentNode;//si agrego un parent que seria el <tr> ya no cambia de color
  4.     elem.style.background=obj.checked ? '#ff0' : '';
  5.     }
  6.   </script>

y mi tabla es esta(se genera automáticamente)

Código HTML:
Ver original
  1.           <?
  2.           $i=0;
  3.           while ($row = mssql_fetch_array($resultado)){
  4.             ?>
  5.           <tr>
  6.             <td class="fila_<?php echo $i%2; ?>"><input type="checkbox" onClick="cambiar(this)"/></td>
  7.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['idCliente']?></span></td>
  8.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['razonSocial']?></span></td>
  9.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['direccion']?></span></td>
  10.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['estado']?></span></td>
  11.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['municipio']?></span></td>
  12.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['ciudad']?></span></td>
  13.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['email']?></span></td>
  14.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['telefonoCasa']?></span></td>
  15.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['telefonoCelular']?></span></td>
  16.           </tr>
  17.           <? $i++; }?>
  18.           </tbody>

si pueden ayudarme a resolver este problema...
  #2 (permalink)  
Antiguo 21/11/2012, 11:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Problema al cambiar color de tr con javascript

Pusiste el PHP. Dejá el HTML completo como para que podamos probar ("Completo" significa que lo copiamos, lo pegamos en el editor, guardamos y lo vemos en el navegador para probarlo; no como dejaste ahora, que está separado en dos códigos.)

Es muy fácil de hacer, no se me ocurre dónde podés tener el problema. Quizá porque estás usando nodos y no parentElement, pero estoy adivinando. Habría que ver cómo quedó tu HTML.
  #3 (permalink)  
Antiguo 21/11/2012, 12:05
orenxrei
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al cambiar color de tr con javascript

ok, te pongo el html, hice la prueba y si funciono, pero en el código php las filas se generan automaticamente y no funciona el script...
Código HTML:
Ver original
  1.     <title>pruebas</title>
  2.      <script type="text/javascript">
  3.     function cambiar(obj) {
  4.     elem=obj.parentNode.parentNode;
  5.     elem.style.background=obj.checked ? '#ff0' : '';
  6.     }
  7.   </script>
  8. </head>
  9.  
  10.           <tr>
  11.             <td class="fila"><input type="checkbox" onClick="cambiar(this)"/></td>
  12.             <td class="fila>"><span>'idCliente</span></td>
  13.             <td class="fila>"><span>razonSocial</span></td>
  14.             <td class="fila>"><span>direccion</span></td>
  15.             <td class="fila>"><span>estado</span></td>
  16.             <td class="fila>"><span>municipio</span></td>
  17.             <td class="fila>"><span>ciudad</span></td>
  18.             <td class="fila>"><span>email</span></td>
  19.             <td class="fila>"><span>telefonoCasa</span></td>
  20.             <td class="fila>"><span>telefonoCelular</span></td>
  21.           </tr>
  22.           </tbody>
  23. </body>
  24. </html>
  #4 (permalink)  
Antiguo 21/11/2012, 12:17
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Problema al cambiar color de tr con javascript

No, no. Poné el HTML generado por el PHP. Que pongás el ejemplo que funciona a mí no me sirve de nada, quiero ver el que no anda.
Y ya que estás, aprovechá para probar lo que supuse.

Código:
...
elem=obj.parentElement.parentElement;
...
  #5 (permalink)  
Antiguo 21/11/2012, 12:42
orenxrei
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al cambiar color de tr con javascript

ok amigo, te dejo aquí el código con algunos cambios pero de igual forma no funciona el parentElement... te menciono que estoy trabajando con sql server, solo tendrías que cambiarle los mssql_ por mysql_ en caso de que trabajes con mysql y crear la tabla

Código PHP:
Ver original
  1. <html>
  2.  <meta charset="utf-8">
  3.  <head>
  4.     <title></title>
  5.    
  6.  <style type="text/css">
  7.  
  8.   .fila_0{ background-color: #FFFFFF;}
  9.   .fila_1{ background-color: #E5E5E5;}
  10.  
  11.   table{
  12.   border: solid 1px #D5D5D5;
  13.   border-collapse: collapse;
  14.   height: 250px;
  15.   width:50%;}
  16.  
  17.   table td{
  18.     border:1px solid #D5D5D5;
  19.     font-family:Verdana;
  20.     font-size:10px;
  21.     padding:7px 5px;}
  22.  
  23.  table th {
  24.     background-color:#EEE;
  25.     border-right:1px solid #D5D5D5;
  26.     font-family:Verdana;
  27.     font-size:10px;
  28.     line-height:120%;
  29.     font-weight:bold;
  30.     padding:8px 5px;
  31.     text-align:left;
  32. }
  33.  </style>
  34.  
  35.   <script type="text/javascript">
  36.     function cambiar(obj) {
  37.     elem=obj.parentNode;
  38.     elem.style.background=obj.checked ? '#ff0' : '';
  39.     }
  40.   </script>
  41.  
  42.  </head>
  43.  
  44. <?php
  45.     include("msconexion.php");
  46.     $conexion = conectar();
  47.     $resultado = mssql_query("select top 100 idCliente,razonSocial from cliente",$conexion);
  48.  ?>
  49.  
  50.  <body>
  51.     <div class="tablaDatos">
  52.     <table id="tablaDatos" cellspacing="0" cellpadding="0" align="center">
  53.         <thead>
  54.           <tr>
  55.             <th width="auto"><div align="center">Marcar</div></th>
  56.             <th width="auto"><div align="center">idCliente</div></th>
  57.             <th width="autox"><div align="center">Razón Social</div></th>
  58.  
  59.  
  60.           </tr>
  61.         </thead>
  62.         <tbody>
  63.           <?
  64.           $i=0;
  65.           while ($row = mssql_fetch_array($resultado)){
  66.             ?>
  67.           <tr>
  68.             <td class="fila_<?php echo $i%2; ?>"><input type="checkbox" onClick="cambiar(this)"/></td>
  69.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['idCliente']?></span></td>
  70.             <td class="fila_<?php echo $i%2; ?>"><span><?=$row['razonSocial']?></span></td>
  71.           <? $i++; }?>
  72.           </tbody>
  73.     </table>
  74.  
  75.     </div>
  76.  </body>
  77.  </html>

y conexión al servidor

Código PHP:
Ver original
  1. <?php
  2.     function conectar(){
  3.         try{
  4.         $usuario = "";
  5.         $contraseña = "";
  6.         $servidor = "";
  7.         $baseDatos = "";
  8.  
  9.         if(!$conectID = @mssql_connect($servidor,$usuario,$contraseña)){
  10.                 echo "No se logro la conexion al servidor";
  11.  
  12.         }else{
  13.             if(!@mssql_select_db($baseDatos,$conectID)){
  14.                 echo "No se logro la conexion al servidor";
  15.             }else{
  16.                 //echo "Conexion establecida"."<br>";
  17.                 return $conectID;
  18.             }
  19.  
  20.         }
  21.  
  22.     }catch(Exception $e){
  23.     echo "Caught Exception ('{$e->getMessage()}')\n{$e}\n";
  24. }
  25. }
  26.  
  27. ?>

si necesitas algo mas avisame y gracias por ayudarme
  #6 (permalink)  
Antiguo 21/11/2012, 12:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Problema al cambiar color de tr con javascript

No, no cambio nada. Quiero el HTML capturado de tu página. ¿Qué es lo difícil de entender de eso?

A ver, alguien que entienda de lenguaje de servidores ¿hay alguna razón para que no se pueda ver el código fuente en los documentos creados por sql server?

Porque si es así, quizá estás en el foro equivocado.
  #7 (permalink)  
Antiguo 21/11/2012, 12:56
orenxrei
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al cambiar color de tr con javascript

jajaja, ok creo que te refieres al código fuente... no capte disculpa, y ya descubrí la razón, los td tienen un estilo para identificar pares e impares por lo tanto hacia conflicto con el script jejeje perdón por quitarte tu tiempo, de todos modos gracias por ayudarme

Saludos :)

Última edición por orenxrei; 21/11/2012 a las 13:10
  #8 (permalink)  
Antiguo 21/11/2012, 15:25
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Problema al cambiar color de tr con javascript

Es asi. Me alegro que lo hayas resuelto. Justamente la idea es que al mirar el codigo fuente te das cuenta de que esta mal. Con tu respuesta estas ayudando a otros a entender que hay que buscar primero; y sobre todo por que insistimos tanto en eso del codigo.

Etiquetas: color, funcion, input, php
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 21:39.