Campos en arbol dinamicamente

luqueagm · #1 (**permalink**) 16/05/2011, 20:35

CAMPOS EN ARBOL DINAMICAMENTE

¿como es posible hacerlo?. Tengo algo desarrollado pero no he podido generar una anidacion mas alla de la primera anidacion hija. Luego, al anidarla mas alla no puedo llegar a hacerlo... Mi interes sería ir creando anidaciones en primera categoria, y luego las sucesivas categorias que puedan ir naciendo en la medida que se eligen crearlas. Pero tambien que uno pudiese elegir qué categoria habria que crear libremente ....

Código PHP:

  <script> 
function fnAppend(){ 
   var oNewNode = document.createElement("LI"); 
   oList.appendChild(oNewNode); 
   oNewNode.innerText="List node 5"; 
 
    var oNewNode1 = document.createElement("UL"); 
           oList.appendChild(oNewNode1); 
          oNewNode1.innerText="List node 111"; 
 
    var oNewNode2 = document.createElement("UL"); 
           oList.appendChild(oNewNode2); 
          oNewNode2.innerText="List node 222"; 
 
 
 
   var oNewNode3 = document.createElement("LI"); 
   oList.appendChild(oNewNode3); 
   oNewNode3.innerText="List node 333"; 
 
    var oNewNode4 = document.createElement("DL"); 
           oList.appendChild(oNewNode4); 
          oNewNode4.innerText="List node 444"; 
 
    var oNewNode5 = document.createElement("DT"); 
    var oNewNode6 = document.createElement("DD"); 
           oList.appendChild(oNewNode5); 
        oList.appendChild(oNewNode6); 
          oNewNode5.innerText="List node 555"; 
        oNewNode6.innerText="List node 666"; 
 
 
    var oNewNode7 = document.createElement("dd"); 
           oList.appendChild(oNewNode7); 
          oNewNode7.innerText=tuno.value; 
 
    var oNewNode9 = document.createElement("ol"); 
           oList.appendChild(oNewNode9); 
          oNewNode9.innerText=""; 
 
 
     var campo = document.createElement("input"); 
        campo.id = 'agregacampo000000000000000001' 
           oList.agregacampo000000000000000001.appendChild(campo); 
        campo.innerText=tuno.value; 
 
 
    var espacio = document.createElement("dd"); 
           oList.appendChild(espacio); 
          espacio.innerText=""; 
 
 
 
    var dd = document.createElement("dd"); 
           oList.appendChild(dd); 
    var oNewNode8 = document.createElement("input"); 
           oList.appendChild(oNewNode8); 
          oNewNode8.innerText=""; 
 
 
 
} 
</script> 
<body> 
<ul ID = oList> 
<input type="text" name="tuno" ID=agregacampo01 value ="ffffffffffffffff" /> 
<li>List node 1</li> 
<li>List node 2</li> 
<li>List node 3</li> 
<li>List node 4</li> 
 
</ul> 
 
<input 
   type = "button" 
   value = "Append Child" 
   onclick = "fnAppend()" /> 
 
 
 
 
 
 
</body>

zerokilled · #2 (**permalink**) 16/05/2011, 21:15

buenas,
la verdad no comprendo muy bien lo que quieres hacer. probe el codigo pero como estoy viendo cosas que no entiendo lo que son, no me es posible deducir lo que intentas hacer. tampoco me he fijado mucho en el codigo pero la consola reporta varios errores, parece que principalmente de referencias. por ejemplo, en el script usas la variables tuno y oList las cuales no estan declaradas. te recomiendo que utilices la consola de error del navegador para analizar el codigo.

abimaelrc · #3 (**permalink**) 16/05/2011, 21:57

¿Te funciona esto?

Código PHP:

  <html>
<head>
<script type="text/javascript">
var div = null;
var ul = null;
var n = 1;

function addNextChild(){
    if(div == null){ 
        div = document.getElementById('tree');
        ul = document.createElement('ul');
        ul.id = 'subTree';
        div.appendChild(ul);
    }
    var li = document.createElement('li');
    li.appendChild(document.createTextNode('foo' + n++));
    ul.appendChild(li);
}

</script>
</head>
<body>
<div id="tree">
<a href="#" onclick="addNextChild(); return false;">Añadir</a>
</div>
</body>
</html>

InKarC · #4 (**permalink**) 16/05/2011, 22:50

El codigo no se lo entiendo en lo absoluto, pero si entendi sus palabras deberia ser algo parecido a esto:

Código Javascript:

Ver originalvar boton = '<a href="#" onclick="nueva_categoria(this);return false;">AÑADIR SUBCATEGORIA</a>';
function nueva_categoria(aqui){
var contenedor = aqui.parentNode.getElementsByTagName("ul");
if(contenedor.length == 0){
    aqui.parentNode.innerHTML += "<ul><li>Una hija " + boton + "</li></ul>";
} else {
    contenedor[0].innerHTML += "<li>Una hija " + boton + "</li>";
}
}

Aqui lo puede ver funcionando: http://jsfiddle.net/RgNnj/

luqueagm · #5 (**permalink**) 17/05/2011, 14:02

hijo de foo3, y foo5 y foo6 y foo7 fuesen hijos de foo4... y asi yi pudiese ir aramando una serie de categorias de clasificacion. Eso luego lo voy a hacer con inputs pero lo aplicaré una vez que pueda ir anidando dentro de otros eventos ya anidados...

ejemplo

foo1
foo2
foo3
foo4
foo5
foo6
foo7

InKarC
voy a ver lo que expones, ya que tengo problemas para copiar el codigo.... pero por lo visto, vas generando listas dentro de ul, ...pero ya lo pruebo....

luqueagm · #6 (**permalink**) 17/05/2011, 14:03

uy.... lo anterior de foo's deberia ser entendido en categorias....

ejemplo

Código PHP:

luqueagm · #7 (**permalink**) 17/05/2011, 15:53

Modifique esto.... aqui esta como constante, pero la idea sería que cada foo o foos se entendiese como input... pero lo que intento es que cada nivel de jerarquia pueda ser definido libremente (o sea que uno pueda decidir si se le coloca en primer o seguno nivel o tercera categoria...a cada uno de ellos...o en primera categoria como una rama nueva)

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
var div = null; 
var ul = null; 
var n = 1; 
 
function addNextChild(){ 
    if(div == null){  
        div = document.getElementById('tree'); 
        ul = document.createElement('ul'); 
        ul.id = 'subTree'; 
        div.appendChild(ul); 
    } 
    var li = document.createElement('li'); 
    li.appendChild(document.createTextNode('foo' + n++)); 
    ul.appendChild(li); 
 
        var lele = document.createElement('ol'); 
    lele.appendChild(document.createTextNode('foos' + n++)); 
    ul.appendChild(lele); 
     
} 
 
</script> 
</head> 
<body> 
<div id="tree"> 
<a href="#" onclick="addNextChild(); return false;">Añadir</a> 
</div> 
</body> 
</html>

zerokilled · #8 (**permalink**) 17/05/2011, 15:57

¿y lo que buscas no es parecido a lo que mostro @inkarc?

luqueagm · #9 (**permalink**) 17/05/2011, 17:03

ah si... disculpa... habia visto solo la otra solucion que por tiempos de trabajo estaba colapsado.... y recien la vi....
es excelente Inkarc... es justamente lo que necesitaba....lo unico que voy a agregarle es un input dinamico en vez de la leyenda 'AÑADIR SUBCATEGORIA'....para asi poder ingresarle datos numericos y de texto.....

gracias Inkarc y gracias tambien zerokilled ya que me recordaste....
y tambien a los demas....

luqueagm · #10 (**permalink**) 17/05/2011, 18:11

lo hice asi, pero tengo el problema que no me reconoce como variable 'exe'. El problema es que me gustaría poder tenerlo en forma dinamica para poder enviar los valores de cada campo a una tabla, pero no me reconoce el susodicho...

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
 
var boton = '<a href="#" onclick="nueva_categoria(this);return false;">AÑADIR  
 
SUBCATEGORIA</a> [COLOR="Blue"]<INPUT type="text" name="nombre" value="">[/COLOR]'; 
 
[B][COLOR="Red"]var exe [/COLOR][/B]= document.createElement("input").innerText ="" ; 
 
 
function nueva_categoria(aqui){ 
var contenedor = aqui.parentNode.getElementsByTagName("ul"); 
if(contenedor.length == 0){ 
    aqui.parentNode.innerHTML += "<ul><li>Una hija " + boton + "</li></ul>"; 
} else { 
    contenedor[0].innerHTML += "<li>Una hija " + boton + [B][COLOR="red"]exe[/COLOR][/B] + "</li>" ; 
} 
} 
 
 
</script> 
 
</head> 
<body> 
<div id="tree"> 
<a href="#" onclick="nueva_categoria(this);return false;">AÑADIR SUBCATEGORIA</a> 
</div> 
</body> 
</html>

luqueagm · #11 (**permalink**) 06/06/2011, 17:37

hola

Estoy tratando de mejorar este codigo. Lo que necesito es poder desarrollarle un id correlativo, para poder asignarle un nombre identificativo a cada campo de valor. Así, podré llegar a extraer estos datos a una tabla, con el objetivo de poder asignarle informacion. El problema con el que me encuentro es que cada vez que intento desarrollar el correlativo proximo, puede haber reiteraciones de id, por lo cual no podria luego llegar a extraer nuevamente a una celda porque repetiria datos.....

Solicito ayuda porque lo necesito para elaborar ecuaciones. Si alguien sabe de algun programa que lo haga, bienvenido sea, porque es para un trabajo nuevo que voy a tener, por lo cual necesisto tenerlo luego.... agradeceria la ayuda...

aqui el codigo:

Código PHP:

  <html> 
<head> 
 
 
 
<script type="text/javascript"> 
 
 
 
var boton = '<a href="#" onclick="nueva_categoria(this);return false;">AÑADIR SUBCATEGORIA</a>'; 
 
var count = 1;  
 
var exe = '<TABLE><TD><INPUT style="background:yellow" type="text" name="nombre" id="campo' + count +  
 
'"value="8000">  </TD></TABLE>' ; 
 
document.write("The number is " + count); 
 
 
 
 
 
function nueva_categoria(aqui){ 
 
for (count=1;count<=10;count+1) 
{ 
 
var contenedor = aqui.parentNode.getElementsByTagName("ul"); 
if(contenedor.length == 0){ 
    aqui.parentNode.innerHTML += "<ul><li>Una hija " + boton + exe + "</li></ul>"; 
} else { 
    contenedor[0].innerHTML += "<li>Una hija " + boton + exe + "</li>"; 
} 
} 
 
 
} 
</script> 
 
 
 
 
 
 
</head> 
<body> 
<div id="tree"> 
<a href="#" onclick="nueva_categoria(this);return false;" >AÑADIR SUBCATEGORIA</a> 
 
 
 
<TABLE id=tabla3> 
<td>nombre.value</td> 
</TABLE> 
 
 
 
 
 
 
<SCRIPT LANGUAGE="VBSCRIPT">  
<!--  
countB=1 
sub repetirtabla3 
 
''for i=1 to 1 step 1 
     Dim objRow, objCell 
    Set objRow = tabla3.insertRow() 
'''''''''''''''objRow.insertCell().innerText = document.getElementById("campo1").value 
objRow.insertCell().innerText = document.getElementById("campo"& countB).value 
    Set objCell = Nothing 
    Set objRow = Nothing 
countB=countB+1 
''NEXT 
 
End sub  
-->  
'''''''''''''var exe = '<INPUT type="text" name="nombre" id="campo" value="8000">' ; 
''''''''''''var exe = '<INPUT type="text" name="nombre" id="campo' + i + '"value="8000">' ; 
'''''''''''var exe = '<INPUT type="text" name="nombre" id="campo' + countLL + 1 + '"value="8000">' ; 
 
</SCRIPT>  
 
 
 
<INPUT onclick=repetirtabla3() type=button value='DETALLAR8' style="background:orange"  
 
name=extraetextoatabla> 
</div> 
</body> 
</html>