un efecto contraer....

[zyon]

que tal, digamos que tengo lo siguiente:

TABLA 1
TABLA 2
TABLA 3

son tablas que he creado dinamicamente y que se pueden anidar... quiero hacer un efecto de expander y contraer a partir de mis tablas bases y que se viera algo asi:

Código PHP:

  TABLA 1
TABLA 2
 - TABLA 2.1
    - TABLA 2.1.1
    - TABLA 2.1.2
 - TABLA 2.2
TABLA 3 
   

estoy logrando hacer el efecto de expander, pero no se me ocurre como contraer, por ejemplo si presiono la tabla 2.1 deberián desaparecer(quiero eliminarlas con DOM) la tabla 2.1.1 y 2.1.2, me explico?

crei que podria ir recorriendo las tablas e eliminar aquellas cullo id conengan TABLA 2.1....pero no hayo el modo, mi otra salida es usar DOM pero tampoco encuentro algo que me ayude, si alguie´n tiene una idea se la agradecere muchisimo!

[bookmaster]

Si mas o menos controlas el DOM para hacerlas salir, para quitarles el texto podrías ponerlas con el innerHTML="". Así eliminarias cualquier tipo de código que tenga dentro y aria el efecto de desparecer.

[caricatos]

Hola:

Creo que un buen ejemplo sobre mostrar/ocultar elementos usando el DOM puedes verlo en el destripador... en la última pestaña se puede ver el código (incluso modificar y probar, aunque si no estás seguro es mejor no retocarlo mucho por si se te cuelga...)

Saludos

[zyon]

mi problema es definir cuales, es decir, como puese en el ejemplito de arriba, solo necesito eliminar tablas determinadas, solo que no se como encontrarlas, mi única pista es que su id esta formado en parte por el id de su "tabla padre" pero realmente no se me ocurre como encontrar esas tablas que quiero eliminar

[zyon]

perdon caricatos no habia visto tu respuesta y encontre estas funciones que alparecer son lo que hacen lo que necesito:

Código PHP:

  function __mostrando(e) {
    if (document.all) soy = event.srcElement;
    else soy = e.target;
    mostrar(soy);
}
 
function _ocultar(donde)    {
    donde.parentNode.removeChild(donde.parentNode.lastChild);
}
 
function mostrar(donde)    {
    estado = (donde.value == "desplegar");
    texto = (estado) ? "plegar" : "desplegar";
    donde.value = texto;
    (estado) ? _mostrar(donde) : _ocultar(donde);
} 
   

no entiendo la funcion de _ocultar(donde), donde es el objeto, pero despues no entiendo bien que haces, estas indicando que remueva el ultimo hijo del nodo padre? soy malo para interpretar

referente al objeto donde, que es? tampoco entiendo su sognificado, me faltaron checar mas funciones que conformen la accion de comprimir?

[caricatos]

Hola:

Sin duda el código es un poco complejillo, pero estás en lo certo... y es que se borra lo mismo que anteriormente se ha creado:

donde.parentNode.appendChild(capa);

La explicación es que cada línea "destripada" que tiene un botón, tiene el evento click asociado a funciones del tipo verXXXX(this), donde this es el botón (dentro de una capa) y cada función crea un elemento nuevo (hermano menor del propio botón)...

Lo que vamos a ver es como solucionas el problema... no siempre necesitamos como referencia el id, puede ser suficiente el orden de ubicación con respecto al padre... y si quieres borrar todos los hijos se puede usar un bucle while con la condición hasChildNodes()...

function borrar_mis_hijos(yo) {
while (yo.hasChildNodes()) yo.removeChild(yo.firstChild);
}

Saludos

[zyon]

que tal caricatos, he probado lo que me sugeriste, pero solo me borra la siguiente tabla o haci misma, algo que no entiendo es el como se definen los hijos...

estrictamente hablando lo unico que hago es crear tablas individuales dandoles a las tablas hijas una celda mas disfrazada del color del fondo de la pagina para simular la identacion a la derecha...

el ejemplo que esty probando es

Código PHP:

  TABLA_PADRE_0 
 - TABLA_HIJA_0_0 
    - TABLA_HIJA_0_0_0
       - TABLA_HIJA_0_0_0_0
 - TABLA_HIJA_0_1
TABLA_PADRE_1 
   

ahora, cuando intento cerrar las tablas hijas de TABLA_HIJA_0_0 solo se elimina asi misma :S por eso se me hace complicado dom, por que no comprendo aun la relacion entre los nodos, no se cuando son hijos y cuando no, supongo que se elimina asi misma por que la tabla sigueinte realmente no tiene relación ya que es muy independiente como comente arriba....

pero hay algún modo de saber los nodos que hay entre dos nodos existentes?

[zyon]

se podria recorrer los nodos a partir de un punto determinado hacia bajo y detenerme donde le indique?

[caricatos]

Hola:

Me parece que si borras un nodo, aitomáticamente borra sus hijos si los tuviera... al menos en el enlace que he puesto antes pasa eso... pero se podría facilmente incluir una condición recursiva...

function borrar_mis_hijos(yo) {
while (yo.hasChildNodes()) {
if (yo.firstChild.hasChildNodes()) borrar_mis_hijos(yo.firstChild);
yo.removeChild(yo.firstChild);
}
}

Otra vez lo puse a pelo, pero sin duda funciona...

Saludos

[zyon]

hola, pues lo probe y me manda un alert que dice: "out of memoria at line : 526", es la linea donde esta el while, en que momento se rompe ese while? basado en mi ejemplo el objeto yo vendria siendo getElementById('TABLA_HIJA_0_0')? y finalmente, te comente que la anterior instruccion solo se borraba asi misma la tabla, en esta que me diste que es diferente a parte de la condicion?

nuevamente te menciono que las tablas son independientes, no anido tablas dentro de otra tabla, simplemente es una fila de tablas ...

por eso pienso que no jhay relacion y solo se me ocurre saber las tablas que hay entre dos puntos.... tu que piensas?

[caricatos]

Hola:

No entiendo bien la razón del error ya que hay una condición que no debería permitir bucles infinitos... pero al ponerlo a pelo, tal vez se me haya colado algo...

El hecho de que sean independientes da mucha complejidad al tema, pero podrías ayudarte de un array donde guardes los nombres de las tablas y se convertiría en una búsqueda bastante más sencilla...

Creas una variable del tipo array global:
var lasTablas = new Array();

Y por vada nueva tabla creada añadir su id al array:
lasTablas[lasTablas.length] = nuevoId;

Saludos

[zyon]

la condicion dice que mientras tenga descendencia se ejecute, pero en una tabla que seria? unicamente sus nodos TR y CELL o el mismo texto en ellos, pero la sigueinte tabla ya no aplicaria, o si?

[zyon]

mm no lo habia pensado, si podria serme muy util, tratare de implementarlo de ese modo!!!!

[zyon]

realmente me ayudo eso dle arreglo, ahora puedo conocer las tablas "hijas" y eliminarlas, solo que hay un detale, hago esto en una parte :

objEliminar=document.getElementById(tabla);
objEliminar.parentNode.removeChild(objEliminar);

la variable tabla es el nombre de las tablas, al ejecutar esas instrucciones la primera vez lo hace de maravilla, al hacer una segunda prueba me marca un error indicando que "Se requiere un objeto" y apuntando a la linea que elimina a la tabla, pero sin embargo sigue borrando las tablas que le indico, me gustaria evitar ese error de script, que puede ser?

[caricatos]

Hola:

Al eliminar las tablas, debes también eliminar la entrada del array, o cambiar su contenido por algo que nunca vayas a eliminar... por ejemplo añadirle al id (en el array la coletilla "[eliminado]")... o te refieres a otra cosa

Saludos

[zyon]

es cierto, debe ser eso, podria hacer eso de agregarle algo mas como "eliminado", pero es posible borrar ese elemento del array?

[zyon]

bueno, si tenias razón, no eliminaba ese elemenot de mi arreglo, solo modifique el valor, pero mi otra pregunta sigue en pie :P ...

cuando lo haga funcionar como io deceo subire un ejemplo, tal vez le sea util a alguien mas...Gracias caricatos, eres muy bueno en esto!

[caricatos]

Hola:

Lo de borrar elementos de un array, siempre que sea el último es fácil, y si tienes el array ordenado tanto mejo...

Si todas las tablas empiezan por "TABLA", basta con ponerl una letra mayor al principio, luego volver a ordenarla y por último acortarla en un elemento (¡Facilísimo!)

lasTablas[encontrado] = "u";
lasTablas.sort();
lasTablas.length--;

Esa es la teoría, pero habría que probarlo.

Saludos, y se agradecen los comentarios

[zyon]

io creo solo modificare la posición jeje, ya me andan apurando para hoy, de nuevo muchas gracias!