Ordenando Los Text dinamicos [Ayuda]

NaikiOwned · #1 (**permalink**) 16/12/2009, 10:21

Bueno tengo un codigo para crear textbox dinamicos y todo xevere, lo malo es el orden en el que salen, por ahora me sale asi:

eh probado de mil maneras en mis casos conocimientos, ya que aun soy novato, para que se vea mejor y no me sale T_T...quisiera que según salgan los text se vean como varios miniformularios o nose pero que se vea mejor que lo mostrado,gracias.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function crearCampos(cantidad){
var div = document.getElementById("campos_dinamicos");
while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
    for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
    var salto = document.createElement("P");
    var input = document.createElement("input");
	var input2 = document.createElement("input");
	var input3 = document.createElement("input");
	var input4 = document.createElement("input");
	var input5 = document.createElement("input");
    var text = document.createTextNode("	Titulo " + i + ": ");
	var text2 = document.createTextNode("	Cap " + i + ": ");
	var text3 = document.createTextNode("	Link DL " + i + ": ");
	var text4 = document.createTextNode("	Contenido " + i + ": ");
	var text5 = document.createTextNode("	P clave " + i + ": ");
	input.setAttribute("name", "titulo[]");
    input.setAttribute("size", "20");
	input.className = "input";
	input2.setAttribute("name", "cap[]");
    input2.setAttribute("size", "20");
	input2.className = "input";
	input3.setAttribute("name", "linkdl[]");
    input3.setAttribute("size", "40");
	input3.className = "input";
	input4.setAttribute("name", "cont[]");
    input4.setAttribute("size", "40");
	input4.className = "input";
	input5.setAttribute("name", "clave[]");
    input5.setAttribute("size", "40");
	input5.className = "input"
    salto.appendChild(text);
	salto.appendChild(input);
	salto.appendChild(text2);
	salto.appendChild(input2);
	salto.appendChild(text3);
	salto.appendChild(input3);
	salto.appendChild(text4);
	salto.appendChild(input4);
	salto.appendChild(text5);
	salto.appendChild(input5);
    div.appendChild(salto);
    }
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel by 3.1416Chuo</title>
</head>

<body>
<form method="post" action="cerebro.php">
Cantidad <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos(this.value);"/>
<div id="campos_dinamicos"></div>
<input type="submit" name="enviar" />
</form>

</body>
</html>

cesarpunk · #2 (**permalink**) 16/12/2009, 12:18

pero podrías meter en tu script etiquetas html para hacer celdas o tablas de tal forma que ordenen tus textbox con el diseño que deseas. Es cuestion de concatenar. Aunque bueno, si usas un lenguaje de servidor sería mas sencillo.

jackson666 · #3 (**permalink**) 16/12/2009, 12:22

Que queres que se vean uno abajo del otro?

Si queres uno abajo del otro, por cada appendChild agrega un <br /> y listo...

zerokilled · #4 (**permalink**) 16/12/2009, 16:07

si le aplicas una hoja de estilo, seria mejor. por ejemplo el siguiente, pero en realidad puedes hacerlo como gustes.

Código:

p{
width:200px;
padding:.5em;
margin:1em;
float:left;
}

input{
display:block;
width:100px;
}

NaikiOwned · #5 (**permalink**) 21/12/2009, 10:08

así es mi estimado salio con estilos 8), gracias a todos.