[SOLUCIONADO] Comparar el contenido de 2 celdas de una tabla

[dardo123]

Hola estimados, tengo el siguiente problema. Estoy cargando en una <table> los registros de una base de datos. Pero estos datos los estoy mostrando en unos input text para que el usuario pueda modificarlos.

El tema es que quiero poner de color rojo el background del input si a medida que escribe para modificar el valor del dato este no corresponde al valor del input vecino. Yo sé que sería algo así:

Código:

var campo1 = document.getElementById('km_prog');
var campo2 = document.getElementById('km_real');
if(campo1.value != campo2.value){
campo1.style.backgroundColor = "red"; 

}

Pero no me resulta! Si alguien me puede ayudar lo agradecería. Les dejo el código para que puedan ver como muestro los datos.

Código PHP:

 <form name="prueba"> 
            <?php 
            if ($row = mysql_fetch_array($result)){  
            ?> 
            <table> 
                    <thead> 
                        <tr> 
                            <th><center>KM Programados</center></th> 
                            <th><center>KM Reales</center></th> 
                        </tr> 
                    </thead> 
                    <tbody> 
            <?php 
               do {  
                   $km_prog=number_format($row["km_prog"], 3, ',', '.'); 
                   $km_reales=number_format($row["km_reales"], 3, ',', '.'); 
                  echo "<tr> 
                  <td class='user-mobile'><input type='text' style='text-align: center' name='km_prog' id='km_prog' value='".$km_prog."'></td><td class='user-mobile'><input type='text' style='text-align: center' name='km_reales' id='km_reales' value='".$km_reales."'></td></tr> \n";  
               } while ($row = mysql_fetch_array($result));  
               echo "</table> \n";  
            } else {  
            echo "¡No se ha encontrado ningún registro!";  
            }  
            ?>  
                    </tbody> 
            </table> 
        </form>  

[Alexis88]

En el bucle do-while estás creando elementos <input> con el mismo id. De partida, ya estás cometiendo un error pues el valor de dicho atributo debe de ser único en todo el documento. Y también vas a tener problemas al momento de enviar los valores a procesar ya que usas el mismo nombre en todos.

Para lo segundo, te conviene usar un array de <input> para lo cual te basta con añadir dos corchetes [] al nombre. Para lo primero, debes de ejecutar una función por cada vez que escribas en los <input>, para lo cual puedes apoyarte en el evento oninput o en cualquiera de los eventos del teclado. Luego, mediante la propiedad parentNode, toma al elemento padre del <input> (que vendría siendo la celda) y luego al padre de esta (que viene siendo la fila); enseguida, tomas al <input> de la otra celda buscándola mediante su clase (las clases sí pueden repetirse) o nombre y comparas su valor con el del <input> en el que se produjo el cambio.

Un ejemplo:

Código HTML:

<tr>
    <td>
        <input type = "text" class = "foo" oninput = "cambio(this, '.bar')" />
    <td>
    <td>
        <input type = "text" class = "bar" oninput = "cambio(this, '.foo')" />
    <td>
</tr>
 

Código Javascript:

function cambio(input, clase){
    var fila = input.parentNode.parentNode,
        otroInput = fila.querySelector(clase);
 
    if (input.value != otroInput.value){
        input.style.backgroundColor = "red";
    }
    else{
        input.style.backgroundColor = "white";
    }
}
 

Saludos

[dardo123]

Entonces el do while debería quedar así?

Código PHP:

  do {  
                   $km_prog=number_format($row["km_prog"], 3, ',', '.'); 
                   $km_reales=number_format($row["km_reales"], 3, ',', '.'); 
                  echo "<td class='user-mobile'><input type='text' style='text-align: center' name='km_prog[]' id='km_prog[]' value='".$km_prog."'></td><td class='user-mobile'><input type='text' style='text-align: center' name='km_reales[]' id='km_reales[]' value='".$km_reales."'></td></tr> \n";  
               } while ($row = mysql_fetch_array($result));  
               echo "</table> \n";  
            } else {  
            echo "¡No se ha encontrado ningún registro!";  
            }  
   

[Alexis88]

No puedes formar arrays teniendo al id como base. Con el nombre es que se hace eso, además, para este caso, el id no es necesario. Solo te faltó añadir la llamada a la función cuando ocurra el evento oninput. Fíjate bien en el ejemplo.

Saludos

[dardo123]

Hola!

No logro hacerlo funcionar, dejé el código así:

Código PHP:

  echo "<tr><td class='user-mobile'><input type='text' style='text-align: center' name='km_prog[]' class='foo' onkeypress='cambio(this, '.bar')' value='".$km_prog."'></td> 
<td class='user-mobile'><input type='text' style='text-align: center' name='km_reales[]' class='bar' onkeypress='cambio(this, '.foo')' value='".$km_reales."'></td></tr> \n";  
   

Código:

<script type="text/javascript">
    	    function cambio(input, clase){
        var fila = input.parentNode.parentNode,
            otroInput = fila.querySelector(clase);
     
        if (input.value != otroInput.value){
            input.style.backgroundColor = "red";
        }
        else{
            input.style.backgroundColor = "white";
        }
    }
    </script>

[Alexis88]

Échale un vistazo a este ejemplo que hice para que lo compares con lo que tienes hecho y hagas las correcciones pertinentes, aunque a primera vista, lo que hiciste parece estar bien.

Saludos

EDITO: El error está en las comillas que usas en la invocación de la función. Te va a tocar escapar las comillas que contienen al nombre de la clase que envías como parámetro.

Código HTML:

onkeypress='cambio(this, \'.bar\')'
 

[dardo123]

El problema estaba en las comillas! Gracias!