Hola:
De nada
scorm, a veces me pico con un tema y.. pasan estas cosas.
Bueno, me apetecía hacerlo también con listas. Si no lo hacía me iba a quedar con la espina, así que lo he traído aquí:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<div align="center">
<input type="button" value="capitulo" name="capitulo" onclick="aniadir()"/>
</div>
</div>
<form action="recibidorGET.php" method="GET">
<ul id="fiel">
<li>
<input type="text" name="cap[]" onclick="foco=this" style="background-color: #eeeeee" onfocus="this.style.backgroundColor = '#cccccc'" onblur="this.style.backgroundColor = '#eeeeee'"/>
</li>
</ul>
<button type="submit">Enviar</button>
</form>
<ul id="modulo" style="display:none">
<li>
<input type="text" name="cap[]" onclick="foco=this" style="background-color: #eeeeee" onfocus="this.style.backgroundColor = '#cccccc'" onblur="this.style.backgroundColor = '#eeeeee'" value="" />
<button type="button" name="div" onclick="borrar(this)">borrar</button>
</li>
</ul>
<script type="text/javascript">
<!--
function insertAfter(nodo, elemento) {
with(elemento.parentNode)
(lastChild == elemento) ? appendChild(nodo) : insertBefore(nodo, elemento.nextSibling);
}
function hermanoSiguienteNoTexto(nodo, tagName) {
nodo = nodo.nextSibling;
while( nodo && (nodo.nodeType===3 || (nodo.nodeType===1 && nodo.tagName.toLowerCase()!=tagName.toLowerCase() )) ) {
nodo = nodo.nextSibling;
}
if( nodo ) return nodo;
else return null;
}
var foco=0;
function aniadir(){
if(foco!=0){
var copia = document.getElementById("modulo").getElementsByTagName("LI")[0].cloneNode(true);
var actualLI = foco.parentNode;
var actualUL = actualLI.parentNode;
copia.getElementsByTagName("INPUT")[0].name = actualLI.getElementsByTagName("INPUT")[0].name +"[]";
try { // Intentamos añadir el elemento a la lista de hijos, pero si no existe la creamos
hermanoSiguienteNoTexto(actualLI, "LI").getElementsByTagName("UL")[0].appendChild(copia);
} catch(err) { // Creamos un LI después del actual con un UL que contendrá los hijos
var nuevoLI = document.createElement("LI"); // siguiente LI
var nuevoUL = document.createElement("UL"); // lista de hijos
nuevoUL.appendChild( copia ); // UL contendrá nuestro elemento caja+boton
nuevoLI.appendChild(nuevoUL); // LI contiene a ese UL
insertAfter(nuevoLI, actualLI); // insertamos ese LI despues de nuestro LI
}
foco.focus(); // le devolvemos el foco tras pulsar el botón
}
}
function borrar(btnBorrar) {
var actualLI = btnBorrar.parentNode;
var actualUL = actualLI.parentNode;
try { // Intento borrar todo el LI que contiene lal lista UL de hijos. Si no existe ese UL es que no tiene hijos.
var siguienteLI = hermanoSiguienteNoTexto(actualLI, "LI");
if( siguienteLI.getElementsByTagName("UL")[0] ); // si no tiene salta aquí la excepción
actualUL.removeChild( siguienteLI );
} catch( err ) { }
actualUL.removeChild( actualLI );
}
// -->
</script>
</body>
</html>
El código javascript se simplifica, se hace más legible. Intentamos una cosa con el try, y si
no cuela, hacemos otra cosa con catch. Es más intuitivo así.
Desde luego el
borrar() es mucho más fácil.
He puesto esta línea en
aniadir() para los
name:
copia.getElementsByTagName("INPUT")[0].name = actualLI.getElementsByTagName("INPUT")[0].name +"[]";
Que lo que hace es añadir un "[]" al final del name si es hijo de alguien, por aportar algo de estructura a el envío de datos. Creo que si no tendríamos un problema serio con el envío de datos. De hecho lo tenemos ya, pero supongo que PHP lo sabrá solventar (yo no sé si sería tan capaz...).
Una estructura tan simple como esta:
Código:
+ padre
|
+-- 1
+-- 2
| |
| +-- a
| +-- b
| +-- c
+-- 3
+-- 4
Devolvería este revoltijo de arrays:
Código PHP:
Array
(
[cap] => Array
(
[0] => padre
[1] => Array
(
[0] => 1
)
[2] => Array
(
[0] => 2
)
[3] => Array
(
[0] => Array
(
[0] => a
)
)
[4] => Array
(
[0] => Array
(
[0] => b
)
)
[5] => Array
(
[0] => Array
(
[0] => c
)
)
[6] => Array
(
[0] => 3
)
[7] => Array
(
[0] => 4
)
)
[div] => borrar
)
Y bueno, la estructura se ve en la profundidad de los arrays, sólo queda limpiarla bien... He intentado poner índices en los name con javascript, pero queda muy sucio.
Quédate con la opción que más te guste.
Un saludo.