Agregar br con javascript

Publicado en 'Programación' por Panchis, 4 Ago 2013.





  1. Panchis

    Panchis Miembro frecuente

    Registro:
    30 Jun 2013
    Mensajes:
    107
    Likes:
    3




    Hola amigos de PH .. tengo una consulta.. estoy creando una pagina html donde tengo tengo un script que genera selects (combos o listas) dinamicamente, el problema esque no encuentro la manera de agregar un br al final del select para que estos se ordenen de forma horizontal y no vertical.. espero me entiendad saludos! :)
     


  2. eduar2083

    eduar2083 Miembro frecuente

    Registro:
    26 Jul 2011
    Mensajes:
    224
    Likes:
    46
    Hola. La etiqueta BR funciona como salto de linea, tal que si la utilizas al final de cada etiqueta SELECT, estos se mostrarán verticalmente y NO horizontalmente como mencionas. Sería mejor que postees algo de código para ver qué es lo que intentas hacer. Igual te dejo un script para ver si te ayuda un poco.
    Código:
    <html>
    	<head>
    		<script language="JavaScript">
    		function btnGenerar_click()
    		{
    			var cantidad = document.getElementById("txtCantidad").value;
    			if (cantidad == "")
    			{
    				alert("Debe ingresar cantidad");
    				return;
    			}
    			
    			var num;
    			
    			try
    			{
    				num = parseInt(num);
    				if (isNaN(cantidad)) throw "No es un número";
    			}
    			catch (err)
    			{
    				alert("Error: " + err);
    				return;
    			}
    			
    			var orden = getRadioButtonSelectedValue(document.form1.rdbOrden);
    			generarCombos(cantidad, orden);
    		}
    		
    		function generarCombos(cantidad, orden)
    		{
    			var i;
    			var acum = "";
    			var s = "<select></select>";
    			for (i = 0; i < cantidad; ++i)
    			{
    				var combo = "<select id=miCombo" + i + ">";
    				combo += "<option value='" + (i + 1) + "'>" + (i + 1) + "</option>";
    				combo += "</select>"
    				if (orden == "V") combo += "<br/>";
    				acum += combo;
    			}
    			document.getElementById("space").innerHTML = acum;
    		}
    		
    		function getRadioButtonSelectedValue(ctrl)
    		{
    			for (i = 0;i < ctrl.length; i++)
    				if (ctrl[i].checked) return ctrl[i].value;
    		}
    		</script>
    	</head>
    	<body>
    		<form id="form1" name="form1">
    			<h1>Generación de combos</h1>
    			<span>Cantidad:</span>
    			<input type="text" id="txtCantidad" size="2">
    			&nbsp;&nbsp;&nbsp;
    			<span>Horizontal:</span>
    			<input type="radio" name="rdbOrden" value="H" checked="true">
    			<span>&nbsp;Vertical:</span>
    			<input type="radio" name="rdbOrden" value="V">
    			<br/><br/>
    			<input type="button" value="Generar combos" id="btnGenerar" onclick="btnGenerar_click();" />
    			<br/><br/>
    			<div id="space">
    			</div>
    		</form>
    	</body>
    </html>
    Saludos.
     
    Última edición: 4 Ago 2013
  3. Panchis

    Panchis Miembro frecuente

    Registro:
    30 Jun 2013
    Mensajes:
    107
    Likes:
    3
    Gracias por la respuesta, soy aun novato en javascript.. mi codigo es este
    Código:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    </head>
    <script>
    	function Servidores(){
    		//Variables y arrays		
    		var cant = document.getElementById("txt_cantServ").value;
    		var servidor = new Array("-- Seleccionar --","180Upload","BillionUpload","CloudZer","FileFactory","FreakShare","Mega","PutLocker","RapidGator","TurboBit","TusFiles","UpToBox","Uploaded","VerZenD","ZippyShared");
    				
    		//Creando los elementos
    		for (var i = 0; i < cant; i++){			
    			var cbo = document.createElement("select");
    			cbo.value = "select_" + i;
    			var txt = document.createElement("input");				
    			txt.type = "text";
    			txt.placeholder = "Enlace de descarga";
    			txt.name = "txt_serv_" + i ;
    				
    			for (var o = 0; o < servidor.length; o++){
    				var opt = document.createElement("option");
    				opt.text = servidor[o];
    				opt.value = o;
    				cbo.appendChild(opt);
    			}
    			div.appendChild(cbo);
    			document.getElementById("servidores").appendChild(cbo);
    		}
    	}
    </script>
    
    <body>
    
    <form name="frm_capitulo" method="post" action=""  enctype="application/x-www-form-urlencoded">
    	
        <!-- Entrada -->
        <p>Url Poster : <input name="txt_poster" type="text" /></p>
        <p>Url Captura : <input name="txt_captura" type="text" /></p>
        <p>Sinopsis : <br /><textarea name="txt_sinop" cols="50" rows="7"></textarea></p>
        <p>Url Miniaturas : <input name="txt_mini" type="text" /></p>
        <p><input name="chk_anterior" type="checkbox" /> Url Capitulo Anterior <input name="txt_antes" /></p>
        <p><input name="chk_lista" type="checkbox" /> Url Lista de Capitulos <input name="txt_antes" /></p>
        <p><input name="chk_siguiente" type="checkbox" /> Url Capitulo Siguiente <input name="txt_antes" /></p>
        
        <!-- Tabla Caracteristicas del Anime -->
        <p>Titulo: <input name="txt_titulo" type="text" /></p>
        <p>Año: <input name="txt_ano" type="text" /></p>
        <p>Duración: <input name="txt_duracion" type="text" /></p>
        <p>Fansub: <input name="txt_fansub" type="text" /></p>
        <p>Genero: <input name="txt_genero" type="text" /></p>
        <p>Estudio: <input name="txt_estudio" type="text" /></p>
        
        <!-- Tabla de Servidores --><p>Ingrese cantidad de servidores : <input name="txt_cantServ" id="txt_cantServ" type="text" /> <input name="btn_CantServ" onclick="Servidores()" type="button" value="Ingresar" /></p>
        <div id="servidores"></div>
        
    </form>
    
    </body>
    </html>
    
     
    Última edición: 4 Ago 2013
  4. eduar2083

    eduar2083 Miembro frecuente

    Registro:
    26 Jul 2011
    Mensajes:
    224
    Likes:
    46
    -Hola. Es necesario, limpiar el div para cada vez que se haga click en el botón, con la finalidad que se borren los elemenos que se habían insertado anteriormente.
    -Para agregar un salto de linea, simplemente creas un elemento br y se lo añades igual.
    Código:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    </head>
    <script>
    	function Servidores()
    	{
    		//Variables y arrays		
    		var cant = document.getElementById("txt_cantServ").value;
    		var servidor = new Array("-- Seleccionar --","180Upload","BillionUpload","CloudZer","FileFactory","FreakShare","Mega","PutLocker","RapidGator","TurboBit","TusFiles","UpToBox","Uploaded","VerZenD","ZippyShared");
    		
    		// Limpiar el div
    		document.getElementById("servidores").innerHTML = "";
    				
    		//Creando los elementos
    		for (var i = 0; i < cant; i++){			
    			var cbo = document.createElement("select");
    			cbo.id = "select_" + (i + 1);
    			
    				
    			for (var o = 0; o < servidor.length; o++){
    				var opt = document.createElement("option");
    				opt.text = servidor[o];
    				opt.value = o;
    				cbo.appendChild(opt);
    			}
    			
    			var txt = document.createElement("input");				
    			txt.type = "text";
    			txt.placeholder = "Enlace de descarga";
    			txt.name = "txt_serv_" + i ;
    			
    			//div.appendChild(cbo);
    			document.getElementById("servidores").appendChild(cbo);
    			document.getElementById("servidores").appendChild(txt);
    			
    			var br = document.createElement("br");
    			document.getElementById("servidores").appendChild(br);
    		}
    	}
    </script>
    
    <body>
    <form name="frm_capitulo" method="post" action=""  enctype="application/x-www-form-urlencoded">
    	
        <!-- Entrada -->
        <p>Url Poster : <input name="txt_poster" type="text" /></p>
        <p>Url Captura : <input name="txt_captura" type="text" /></p>
        <p>Sinopsis : <br /><textarea name="txt_sinop" cols="50" rows="7"></textarea></p>
        <p>Url Miniaturas : <input name="txt_mini" type="text" /></p>
        <p><input name="chk_anterior" type="checkbox" /> Url Capitulo Anterior <input name="txt_antes" /></p>
        <p><input name="chk_lista" type="checkbox" /> Url Lista de Capitulos <input name="txt_antes" /></p>
        <p><input name="chk_siguiente" type="checkbox" /> Url Capitulo Siguiente <input name="txt_antes" /></p>
        
        <!-- Tabla Caracteristicas del Anime -->
        <p>Titulo: <input name="txt_titulo" type="text" /></p>
        <p>A&ntilde;o: <input name="txt_ano" type="text" /></p>
        <p>Duraci&oacute;n: <input name="txt_duracion" type="text" /></p>
        <p>Fansub: <input name="txt_fansub" type="text" /></p>
        <p>Genero: <input name="txt_genero" type="text" /></p>
        <p>Estudio: <input name="txt_estudio" type="text" /></p>
        
        <!-- Tabla de Servidores -->
    	<p>Ingrese cantidad de servidores :
    	<input name="txt_cantServ" id="txt_cantServ" type="text" />
    	<input name="btn_CantServ" onclick="Servidores()" type="button" value="Ingresar" /></p>
        <div id="servidores"></div>
        
    </form>
    
    </body>
    </html>
    No olvides usar &ntilde; para representar la ñ, &oacute; para acentuar la o, etc.

    Saludos
     
  5. Panchis

    Panchis Miembro frecuente

    Registro:
    30 Jun 2013
    Mensajes:
    107
    Likes:
    3
    :hi: muchas gracias bro! ahora si funciona bien :wow:.. analizare los cambios que isiste para no aprender! :) saludos!