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:
Ver original <input type = "text" class = "foo" oninput = "cambio(this, '.bar')" /> <input type = "text" class = "bar" oninput = "cambio(this, '.foo')" />
Código Javascript
:
Ver originalfunction 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