Foros del Web » Programando para Internet » Javascript »

Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de una Tabla

Estas en el tema de Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de una Tabla en el foro de Javascript en Foros del Web. Esto se ve fácil, pero créanme que casi conozco el foro completo de tanto investigar y no encontrar respuesta o no se si es porque ...
  #1 (permalink)  
Antiguo 05/05/2010, 15:33
 
Fecha de Ingreso: enero-2010
Mensajes: 40
Antigüedad: 14 años, 10 meses
Puntos: 1
Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de una Tabla



Esto se ve fácil, pero créanme que casi conozco el foro completo de tanto investigar y no encontrar respuesta o no se si es porque soy nuevo en esto.

Bien, tengo una tabla dinámica hecha en dreamwaver, la cual me trae los campos de la Descripción desde una tabla hecha en mysql<Ver Imagen>

Mi pregunta es: ¿cómo podría lograr mediante javascript que cuando haga click en uno de los checkbox creado en la misma tabla se desactive o active dinamicamente el campo de Valores que le queda al lado, como muestra la imagen.?

Es bueno mencionar que cada uno de los check aparecen por la cantidad de datos encontrados en la Descripción[tabla], lo cual dificulta TODO para crear una simple función de activar y desactivar.

Si alguien tiene un luz que pueda mostrarme un camino afable para lograr hacer esto, le estaré bastante agradecido.
  #2 (permalink)  
Antiguo 05/05/2010, 16:00
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: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

pues en realidad no necesitas de una funcion tan complicada. lo que necesitas aplicar es HTML DOM e Event DOM. HTML DOM para manejarte por los elementos e Event DOM para registrar el evento en un elemento global y determinar en que elemento ocurre. creo que en algun post lo habia explicado pero se tuvo que haber hundido porque fue hace tiempo.

recuerdo que hay un tutorial muy bueno que discutia el asunto pero no tengo el enlace. creo que Panino lo publicaba de vez en cuando, quizas el se acuerde. mientras tanto, puedes comenzar por aqui http://www.howtocreate.co.uk/tutoria...ript/domevents
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 05/05/2010, 17:31
 
Fecha de Ingreso: enero-2010
Mensajes: 40
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

Hermano Zerokilled, Me has leido el pensamiento, pues lo que realmente necesito es no complicarme tanto la existencia por mi condición de ser un bebe en pañales en cuanto a esto.

Agradezco sobremanera tu respuesta, pues no sabia ni papa de lo que significaba HTML DOM y bueno he leído el documento del enlace que me facilitas y ya tengo nociones. Ahora la verdad es que no se si por ignorancia mía no conseguí ni una sola pista para lograr realizar el problema que ahora me agobia.

Así pues, si Panino seria tan amable de prestarme su ayuda a ver si puedo resolverlo de una manera fácil por medio de HTML DOM o alguna persona dentro de foro que conozca sobre esto pudiera orientarme como hacerlo le estaría agradecido.

Nota: No soy fanático a ningún modo de programación, así que sera bienvenida cualquier sugerencia FÁCIL que pudiéramos entender todos.

Gracias!
  #4 (permalink)  
Antiguo 05/05/2010, 18:29
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: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

creo que este es el tema que decia que se hundio, http://www.forosdelweb.com/f13/captu...bjetos-726818/ no tiene nada relacionado al tuyo, pero el principio basico de como hacer las cosas es lo que te aplica. en este otro tema, leete los enlaces que publica panino, http://www.forosdelweb.com/f13/que-p...-estoy-615286/
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 05/05/2010, 20:21
 
Fecha de Ingreso: enero-2010
Mensajes: 40
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

Wao! Esto es inmenso (es otro mundo de programación), Gracias por la info de los link, lo primero es que te voy a pedir disculpas por haber copiado esto, pero es que me pareció excelente ese código de remover sin usar id 'Felicidades' y ¿quisiera saber si es posible adaptarlo a mi necesidad.?

Código Javascript:
Ver original
  1. </style>
  2.  
  3. <script type="text/javascript">
  4. onload = function(){
  5. element("container").onclick = function(evt){
  6. var evt = evt || event, elem = evt.target || evt.srcElement; // DOM || IE;
  7. if(/span/i.test(elem.nodeName) && /image-remove/.test(elem.className) && element("container") == elem.parentNode.parentNode)
  8. // en la condicion se verifica: el elemento sea un SPAN, el elemento contiene la clase "image-remove", que el padre del elemento sea hijo de la raiz;
  9. return element("container").removeChild(elem.parentNode);
  10. }}
  11.  
  12. function element(id){
  13. return document.getElementById(id);
  14. }
  15. </script>


Mira en la primera pagina que me diste: (http://www.howtocreate.co.uk/tutoria...ript/domevents) fui probando algunas opciones con tu codigo y me pregunto si ¿existe alguna posibilidad de que en vez de realizar la opcion: removeChild(elem.parentNode) para remover el Node, existe una para desabilitar.? Pues solo encontré algo para desabilitar Style y no es de mucha ayuda en mi caso.

Mil disculpa por copiar este código y mil disculpas si abuso preguntando.

Gracias
  #6 (permalink)  
Antiguo 05/05/2010, 20:32
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: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

se puede inhabilitar los campos, de lo contrario en un principio no te hubiera hecho enredarte con la informacion. como ya te habia mencionado, ese codigo no aplica a tu caso pero si la base. dentro de la funcion es donde tienes que escribir tus codigos para manejarte por DOM y llegar hasta el campo que quieres inhabilitar. las lineas 7 al 9 no te aplica, porque como bien dices, es para borrar elementos.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 06/05/2010, 09:15
 
Fecha de Ingreso: enero-2010
Mensajes: 40
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

Gracias por la ayuda, he experimentado mucho tomando como base la función para remover campos por DOM realizada por: <Zerokilled> y entiendo que solo es una base, pero no consigo hacer nada que se adapte a mi necesidad, pues esto es totalmente nuevo para mi. Con esto no pretendo dejar entender que quiero que me hagan el código para resolver mi problema y nada por el estilo, Pero al no saber nada de DOM o muy poco de JavaScript se me complica bastante.

Por Ejemplo: En mi caso con DOM algunas lagunas relevantes:

¿Donde establezco que voy a utilizar tantos checkboxs como campos aparezcan en la tabla y que lo mismo estén relacionados con el campo Valores que en este caso serian los SPAN?

¿Qué elemento voy a definir como raíz para luego ser llamado desde el check seleccionado para activar o desactivar el campo?

¿En que lugar de la función DOM establezco mi código para que sepa lo que va hacer luego de haber seleccionado el objeto?


He estado tan enfocado en esto que no percibo otra forma para hacerlo, si alguien tiene alguna otra sugerencia bienvenida sea.

Gracias!
  #8 (permalink)  
Antiguo 06/05/2010, 15:02
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: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

antes de explicar, primero tienes que comprender el concepto basico de DOM. ¿que es DOM? ¿que son los nodos? ¿como se relacionan los nodos en la estructura jerárquica? ¿cuales son sus metodos o propiedades para interactuar con los nodos? puedes leer acerca de ello en:
http://www.w3schools.com/htmldom/default.asp
http://librosweb.es/ajax/capitulo4.html

los proximos enlaces son referencia a un listado de propiedades y metodos del DOM. notese que no son todas las propiedades del DOM, es solo una parte. especialmente la que aplica en tu caso.
http://www.w3schools.com/dom/dom_node.asp
http://www.w3schools.com/jsref/dom_obj_checkbox.asp
http://www.w3schools.com/jsref/dom_obj_text.asp

Cita:
¿Donde establezco que voy a utilizar tantos checkboxs como campos aparezcan en la tabla y que lo mismo estén relacionados con el campo Valores que en este caso serian los SPAN?
no hay necesidad de establecerlo porque la idea no es trabajar por cantidad, sino por deteccion de elemento donde ocurre el evento.

Cita:
¿Qué elemento voy a definir como raíz para luego ser llamado desde el check seleccionado para activar o desactivar el campo?
puede ser cualquiera que englobe todos los elementos checkboxes. en tu caso, seria la tabla en si (elemento TABLE). incluso pudiera ser el propio objeto window, o document, o el elemento BODY (document.body), pero no es necesario.

mas o menos esta es la teoria. la idea es que el evento determine en que elemento ocurre la accion. cuando un evento ocurre, el navegador automaticamente crea un objeto (clasificado como tipo Event) el cual contiene informacion acerca del evento ocurrido. ese objeto le llega a la funcion registrada en el evento que has definido. comunmente, contiene informacion como:
  • coordenadas XY del raton
  • tipo de evento (click, mousemove, mouseout, keypress, etc...)
  • elemento donde ocurrio
  • otros mas...

para proposito de tu caso, el mas importante es el elemento donde ocurrio, y lo obtienes mediante la propiedad target. si miras en la linea 6 del codigo, veras que la propiedad evt.target es asignada a la variable elem. esa parte no la tienes que escribir, porque ya esta hecho!

el proximo paso es identificar si ese elemento coincide con ciertos criterios. en tu caso, los criterios son si es un elemento INPUT de tipo CHECKBOX. en otras palabras, tienes que crear un condicional que verifique estos dos criterios. en resumen, tienes que leer la propiedad nodeName y type de ese elemento. si volvemos al codigo, la linea 7 vendria siendo lo similar a lo que te explico aqui. solo que en el codigo se utilizan otros criterios el cual esta comentado en al linea 8. evidentemente esta parte la tienes que escribir porque tu criterio es totalmente diferente al que expone el ejemplo.

una vez los criterios coinciden, procede hacer una serie de instrucciones:
  • determinar el estado del elemento checkbox, ya que de acuerdo al estado se decide si se inhabilita o habilita el campo contiguo. para ello se lee la propiedad checked del checkbox, el cual es un boolean donde false indica que no esta marcado, y true lo contrario.
  • luego es manejarse por los elementos hasta llegar al campo con la ayuda del DOM. el DOM define propiedades y funciones que nos ayudan a llegar a un elemento en particular. lo agradable es que puedes hacerlo de varias formas, pero para tu nivel, ¿cual es la mas indicada? la verdad no se me ocurre una solucion "facil" de entender porque como quiera que sea la instrccion quedara un poco larga. partiendo desde el elemento checkbox, puedes:
    nota: aqui es donde tienes que comprender el concepto de los nodos y su relacion
    • subir un nivel (al padre), desplazarte al siguiente elemento (el hermano del padre), desplazarte al primer hijo (el hijo del hermano del padre del checkbox, o sea, un primo del checkbox). parece ridiculo la relacion familiar pero asi es como funciona. cada paso es una propiedad de cada nodo, por lo que terminarias teniendo como minimo 4 propieades en una sola linea. las propiedades para desplazarse por los elementos son: parentNode, nextSibling, firstChild, entre otros mas.
    • la otra forma y la que considero mas facil de entender, es subir varios niveles hasta llegar al elemento que contiene todos los INPUTs de una sola fila, finalmente invocar un metodo que nos devuelve una lista de los INPUTs disponible en esa fila. esa lista esta ordenada segun el orden de aparicion de los INPUTs en el documento. es decir, el primer elemento de la lista corresponde al primer INPUT (descripcion), el segundo corresponde al checkbox (activar), y asi sucesivamente. entonces, la instruccion se compone como (de nuevo, partiendo desde el elemento checkbox): subir un nivel (el padre), subir otro nivel (el abuelo), invocar el metodo getElementsByTagName. a este metodo le pasas como argumento un string del nombre del elemento que quieres capturar en esa fila, o sea, "input". finalmente, para referirte al elemento deseado, indicas la posicion de la misma forma que hacemos en los array.
  • una vez se tiene acceso al elemento deseado, se le indica el estado mediante la propiedad disabled. por supuesto, la desicion se determina en base al estado del checkbox obtenido en los primeros pasos.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #9 (permalink)  
Antiguo 11/05/2010, 10:13
 
Fecha de Ingreso: enero-2010
Mensajes: 40
Antigüedad: 14 años, 10 meses
Puntos: 1
De acuerdo Respuesta: Activar / Desactivar Varias Casillas con Checkbox Con datos Extraidos de u

Muchas gracias por la ayuda, he logrado mucho con este ultimo planteamiento y lo que he leido en c/u de las paginas ofrecidas!


Simplemente Gracias!

Etiquetas: checkbox, desactivar, tablas
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 18:48.