Foros del Web » Programando para Internet » Javascript »

Identificar Fila a aplicar funcion

Estas en el tema de Identificar Fila a aplicar funcion en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/05/2012, 22:06
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Identificar Fila a aplicar funcion

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
  #2 (permalink)  
Antiguo 23/05/2012, 23:07
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Identificar Fila a aplicar funcion

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
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 23/05/2012, 23:28
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: Identificar Fila a aplicar funcion

Suena a complicado :S
  #4 (permalink)  
Antiguo 23/05/2012, 23:43
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: Identificar Fila a aplicar funcion

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 :)
  #5 (permalink)  
Antiguo 24/05/2012, 00:50
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: Identificar Fila a aplicar funcion

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
  #6 (permalink)  
Antiguo 24/05/2012, 07:35
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Identificar Fila a aplicar funcion

¿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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 24/05/2012, 12:10
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: Identificar Fila a aplicar funcion

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

Gracias
  #8 (permalink)  
Antiguo 24/05/2012, 12:45
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Identificar Fila a aplicar funcion

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #9 (permalink)  
Antiguo 24/05/2012, 23:53
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: Identificar Fila a aplicar funcion

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

Etiquetas: fila, formulario, funcion, input, identificador
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 08:51.