Identificar Fila a aplicar funcion

i34a23 · #1 (**permalink**) 23/05/2012, 22:06

Espero poder explicarme mejor aquí.

tengo la siguiente función Javascript:

Código:

function checked(){
document.getElementById('checkUno').checked=true;
document.getElementById('row').style.backgroundColor="#d2d2d2";
}
function unchecked(){
document.getElementById('checkUno').checked=false;
document.getElementById('row').style.backgroundColor="#ffffff";
}



function CambiaColor(){
if (document.getElementById('checkUno').checked==true){
unchecked();
}
else{
checked();
}

}

Básicamente Selecciona el input checkbox si no lo está y cambia el color de la fila, o deSelecciona el input checkbox si lo esta y vuelve al color original.

el script afecta a la siguiente tabla:

Código PHP:

  <body>

<form id="formularioTest" action="#" method="post">

<table border="1">
<tr onClick="CambiaColor()" id="row"><td><input type="checkbox" name="value_0" id="checkUno"></input></td><td><p>Texto aleatorio</p></td></tr>
<tr onClick="CambiaColor()" id="row"><td><input type="checkbox" name="value_1" id="checkUno"></input></td><td><p>Texto aleatorio</p></td></tr>
<tr onClick="CambiaColor()" id="row"><td><input type="checkbox" name="value_2" id="checkUno"></input></td><td><p>Texto aleatorio</p></td></tr>
<tr onClick="CambiaColor()" id="row"><td><input type="checkbox" name="value_3" id="checkUno"></input></td><td><p>Texto aleatorio</p></td></tr>
<tr onClick="CambiaColor()" id="row"><td><input type="checkbox" name="value_4" id="checkUno"></input></td><td><p>Texto aleatorio</p></td></tr>
</table>

</form>



</body>

el problema es que cuando doy click a cualquier input, siempre ejecuta la funcion en el primero, HE AHÍ MI PROBLEMA.

Alguien me puede ayudar y explicarme como hacer que la funcion se ejecute en el checkbox donde se dá el click.

espero puedan ayudarme.

Saludos

zerokilled · #2 (**permalink**) 23/05/2012, 23:07

buenas!
el problema principal que tienes es en el uso de la ID. por norma, una ID debe ser única dentro de un mismo documento. cuando se hace scripting en la circunstancia en que más de un elemento comparte el mismo ID, regularmente el navegador toma el primero que aparece. tienes varias alternativas disponibles, desde pasar parámetros a la función hasta el uso del objeto Event y su modelo. la primera solución consiste en pasar como argumento la referencia del elemento con que deseas trabajar. por ejemplo, si ‒ en lugar de las filas ‒ los checkbox tuvieran el evento onclick, puedes pasarle como parámetro la referencia de esa fila en particular mediante this.parentNode. o lo más adecuado, la referencia del checkbox ya que tienes que determinar su estado. luego desde tu función trabajas directamente con el argumento de la función.

Código:

<element event="handler(this);">...</element>

function handler(element){
// aqui trabajas con el argumento,
// segun la declaracion de esta funcion seria con element. 
// luego, si element es un elemento hijo directamente de la fila,
// para accesar la fila solo debes hacer element.parentNode;
}

la alternativa de usar un objeto Event es mucho más cómoda en cuanto a organización y características, pero manejarlo suele ser complicado para algunos. http://kusor.net/traducciones/brainj...vents1.es.html

i34a23 · #3 (**permalink**) 23/05/2012, 23:28

Suena a complicado :S

i34a23 · #4 (**permalink**) 23/05/2012, 23:43

Bueno, luego de varias pruebas dí con una solución bastante buena, se las dejo.

Código:

<script language="javascript">
function CambiaColor(id,row){
if (document.getElementById(id).checked==true){
document.getElementById(id).checked=false;
document.getElementById(row).style.backgroundColor="#ffffff";
}
else{
document.getElementById(id).checked=true;
document.getElementById(row).style.backgroundColor="#d2d2d2";
}
}
</script>

Simplifique la función y le asigne dos parametros (id,row), los cuales pueden ser entregados dinamicamente a través de PHP.

es lo que buscaba :)

i34a23 · #5 (**permalink**) 24/05/2012, 00:50

Estimados, aplique el ejemplo anterior pero en vez de usar "checkbox" usé inputs tipo "radio"
funiona todo OK al momento de seleccionar un radio (Selecciona radio y pinta fila de color).

Al seleccionar otro RADIO también ejecuta la funcion de seleccionar radio y pintar la fila, pero el radio seleccionado anteriormente queda la fila pintada y el radio deseleccionado.

¿Alguna ayuda de como poner la fila de los inputs Sin Seleccion en color Original?

Saludos

zerokilled · #6 (**permalink**) 24/05/2012, 07:35

¿estás pasándole distintos valores para el primer parámetro de la función o siempre es el mismo valor para cada grupo de radios? el procedimiento de tu función se me hace un tanto incoherente. si le pasas distintos IDs, deja de tener sentido. asume lo siguiente... activas el primer radio (radio1, ejemplo). en la función la condición determina si está marcado y evalua a true. por tanto, se desmarca el radio, se pinta la fila (blanco), y ahí termina el procedimiento de la función. luego marcas otro radio indicando un ID distinto (radio2, ejemplo). ¿qué sucede ahora? la condición determina que dicho radio (el segundo) está marcado y por tanto interpreta su bloque el cual es el mismo procedimiento que el radio anterior. es decir, desmarca ese radio y vuelve a pintar la fila de blanco. como ves, la cláusula else no se interpreta cuando el ID es distinto. tendrías que indicar siempre un mismo ID en cada grupo de radio. sin embargo, debes considerar que solamente estás limitado a dos radios por grupo ya que en la función solo hay dos posibilidades: true y false.

aclaración del ejemplo que había presentado. en la función hay que subir dos niveles en la jerarquía de los elementos ya que el padre directo del INPUT es el elemento TD y no TR. es decir, element.parentNode.parentNode.

i34a23 · #7 (**permalink**) 24/05/2012, 12:10

Ok, creo que me pondré a estudiar para saber como usar los "events" en javascript.
soy algo novato aun en este lenguaje.

Gracias

zerokilled · #8 (**permalink**) 24/05/2012, 12:45

una versión más genérica de tu código.

Código:

// para radio buttons
function CambiaColor(elem,color){
document.getElementById(elem).style.backgroundColor = color;
}
<input type="radio" onclick="CambiarColor('id_fila', 'el_color');">

// para checkboxes
function CambiaColor(check, elem, color){
if(check.checked) document.getElementById(elem).style.backgroundColor = color;
else document.getElementById(elem).style.backgroundColor = "";
}
<input type="checkbox" onclick="CambiarColor(this, 'id_fila', 'el_color');">

el segundo ejemplo tiene una contraparte, y es que no desmarca el checkbox anterior.

i34a23 · #9 (**permalink**) 24/05/2012, 23:53

Bueno, finalmente no pude aplicar los consejos dados por el usuario zerokilled, pero encontré una solucion muy buena:

Código:

function pintarTodo(ctrl){
		for(i=0;i<ctrl.length;i++)
		document.getElementsByTagName('tr')[i].style.backgroundColor="#ffffff";
}

function CambiaColor(id,row){
pintarTodo(document.forms.formularioTest.value);
if (document.getElementById(id).checked==true){
document.getElementById(id).checked=false;
document.getElementById(row).style.backgroundColor="#ffffff";
}
else{
document.getElementById(id).checked=true;
document.getElementById(row).style.backgroundColor="#d2d2d2";
}
}

Tengo dos funciones una llamada pintarTodo que basicamente lo que hace es pintar todas las filas del formulario indicado en (ctrl) blancas.

y luego la funcion CambiarColor, que primero ejecuta la funcion pintarTodo, y luego colorea de color plomo la fila seleccionada :)

me va muy bien para lo que estaba buscando, dejo el código y ojala sirva :)

saludos