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.