Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

schumi_01

[Resolvido] Criacao de campos dinamicamente

Por , em Javascript

Recommended Posts

schumi_01    0

schumi_01
Postado

Pessoal, estou fazendo uma tela de cadastros, mas preciso ir criando campos dinamicamente dentro de uma div.

 

Mas no meu codigo, quando eu clico no botao para criar mais campos na div, ele esta sobrepondo o que ja havia la.

 

obs:a funcao que adiciona os campos eh a addElement.

 

Como eu posso corrigir isso??

 

Segue o codigo.

 


<HTML>
<HEAD>
<TITLE>Modelo 3 - Atendimento </TITLE>
</HEAD>

<style type="text/css">
  .botao{
        font-size:10px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:white;
        background:#638cb5;
        border:0px;
        width:80px;
        height:19px;
       }
	
	#camponome{
	background-color: gray;
	}
	
	#apDiv3{
	position:absolute;
	width:900px;
	height:170px;
	z-index:3;
	left: 08px;
	top: 460px;
	overflow: auto;
		}	
</style>


<script language="javascript">   
		var my_div = null;
		var newDiv = null;
		var newDiv1 = null;
		var cont  = 0;
		var linha = 0;
		var coluna =0;
		var codigo = "";
		var campos = "";
		ar_campos = new Array(0)(0);
		
		function abrePopUp(urlImagem)
		{   
            window.open(urlImagem,'Foto_Ampliada','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=700,height=500');   
        }
        
			   
function addElement()
        {
       
        //indicar o nome do campo como array[novo elemento] 
		if (cont==0)
		{
			newDiv = document.createElement("div");
			newDiv.setAttribute("id","apDiv3");			
			// adicionar o campo ao formulário
			codigo = "<table width='0%' border='1'> <tr> <th width='92' height='02' align='center'> Codigo </th>  <th width='100' height='02' align='center'> Data </th><th width='98' height='02' align='center'> Hora </th><th width='130' height='02' align='center'> Usuario </th><th width='131' height='02' align='center'> Tp Contato </th><th width='93' height='02' align='center'> Contato </th><th width='72' height='02' align='center'> Curso </th> <th width='177' height='02' align='center'> Descricao </th><th width='143' height='02' align='center'> Periodo </th><th width='54' height='02' align='center'> Enviou? </th>  <th width='120' height='02' align='center'> Situacao </th>  <th width='120' height='02' align='center'> Pedido</th>          </tr>                    </table>                                                                              <table width='0%' border=1> <tr bgColor='Lavender'>          <td> <input type='text'  name='' value ='1' size='9'> </td>          <td><input type='text' name='' value='2' size='10'> </td>        <td><input type='text' name='' value='3' size='10'></td>        <td><input type='text' name='' value='4' size='15'> </td>            <td> <select size='1' name='combo'> <option value='1'> Email </option> <option value='2'> Telefone </option> <option value='3'> Enviado pelo Site</option>  <option value='4'> Outros</option>  <option value='5'> Revista</option>  <option value='6'> Google</option>  <option value='7'> Indicacao</option>  <option value='8'> Email Marketing</option>  </select> </td>             <td>  <input type='text'  name='' value ='1' size='9'>   </td>             <td> <select size='1' name='combo'> <option value='1'> 000017 </option> <option value='2'> 000002 </option> </select> </td>                 <td> <input type='text'  name='' value ='1' size='23'> </td>           <td> <select size='1' name='combo'> <option value='1'> Manha </option> <option value='2'> Tarde </option> <option value='3'> Integral </option> <option value='4'> Noturno </option>  <option value='5'> Indiferente </option> <option value='6'> Sabado </option>   <option value='7'> Integral ou Sabado </option> <option value='8'> Noturno ou Sabado </option> <option value='9'> Nao Informado </option>   <option value='10'> In Company </option>  <option value='11'> Integral ou Noturno </option> </select>  </td>   <td> <select size='1' name='combo'> <option value='1'> Sim </option> <option value='2'> Nao </option> </select>  </td>             <td> <select size='1' name='combo'> <option value='1'> Informacoes </option> <option value='2'> Em Andamento </option> <option value='3'> Vendido </option>  <option value='4'> Ficha Enviada </option> <option value='5'> Em Aprovacao </option>     </select> </td>           </td> </tr></table> ";
			
			newDiv.innerHTML = codigo;
			my_div = document.getElementById("apDiv3");
			
			document.form1.insertBefore(newDiv,my_div);
		}else
		{
			
			campos  = "<table width='0%' border=1> <tr bgColor='Lavender'>          <td> <input type='text'  name='' value ='1' size='9'> </td>          <td><input type='text' name='' value='2' size='10'> </td>        <td><input type='text' name='' value='3' size='10'></td>        <td><input type='text' name='' value='4' size='15'> </td>            <td> <select size='1' name='combo'> <option value='1'> Email </option> <option value='2'> Telefone </option> <option value='3'> Enviado pelo Site</option>  <option value='4'> Outros</option>  <option value='5'> Revista</option>  <option value='6'> Google</option>  <option value='7'> Indicacao</option>  <option value='8'> Email Marketing</option>  </select> </td>             <td>  <input type='text'  name='' value ='1' size='9'>   </td>             <td> <select size='1' name='combo'> <option value='1'> 000017 </option> <option value='2'> 000002 </option> </select> </td>                 <td> <input type='text'  name='' value ='1' size='23'> </td>           <td> <select size='1' name='combo'> <option value='1'> Manha </option> <option value='2'> Tarde </option> <option value='3'> Integral </option> <option value='4'> Noturno </option>  <option value='5'> Indiferente </option> <option value='6'> Sabado </option>   <option value='7'> Integral ou Sabado </option> <option value='8'> Noturno ou Sabado </option> <option value='9'> Nao Informado </option>   <option value='10'> In Company </option>  <option value='11'> Integral ou Noturno </option> </select>  </td>   <td> <select size='1' name='combo'> <option value='1'> Sim </option> <option value='2'> Nao </option> </select>  </td>             <td> <select size='1' name='combo'> <option value='1'> Informacoes </option> <option value='2'> Em Andamento </option> <option value='3'> Vendido </option>  <option value='4'> Ficha Enviada </option> <option value='5'> Em Aprovacao </option>     </select> </td>           </td> </tr></table> ";
			codigo = /*codigo +*/ campos;
			
			newDiv.innerHTML = codigo;
			
			//document.mydiv.appendChild(newdiv);
			document.newdiv.insertBefore(newDiv,my_div);
		}
		
		cont++;
}
		
function readElement()
{
        for(x=0; x < ar_campo1.length; x++)
        {
                w = x+1; 
                campo = "document.form1.campo" + w + ".value";
                eval("document.write(" + campo +")");
                document.write("<br>");
        }
} 
</script> 

<body onLoad="addElement()">

<div align ="left" >

<form name="form1" action="" method="post"> 
  
<br>
Contato        <input type="text" name="contato" id="name" value="1" size="10"> <br>  

Nome             <input type="text" name="nome" id="name" value="1" size="80"> <br>    

CPF             <input type="text" name="nome" id="name" value="1"> <br>    

Endereco      <input type="text" name="nome" id="name" value="1" size="80"> <br>    

Bairro           <input type="text" name="nome" id="name" value="1" size="35">         Municipio     <input type="text" name="nome" id="name" value="1" size="16">  <br>    

Estado         
<select size="1" name="combo">
<option value="AC"> Acre </option>
<option value="AL"> Alagoas </option>
<option value="AM"> Amazonas </option>
<option value="AP"> Amapa </option>
<option value="BA"> Bahia </option>
<option value="CE"> Ceara </option>
<option value="DF"> Distrito Federal </option>
<option value="ES"> Espirito Santo </option>
<option value="EX"> Estrangeiro </option>
<option value="GO"> Goias </option>
<option value="MA"> Maranhao </option>
<option value="MG"> Minas Gerais </option>
<option value="MS"> Mato Grosso do Sul </option>
<option value="MT"> Mato Grosso </option>
<option value="PA"> Para </option>
<option value="PB"> Paraiba </option>
<option value="PE"> Pernambuco </option>
<option value="PI"> Piaui </option>
<option value="PR"> Parana </option>
<option value="RJ"> Rio de Janeiro </option>
<option value="RN"> Rio Grande do Norte </option>
<option value="RO"> Rondonia </option>
<option value="RR"> Roraima </option>
<option value="RS"> Rio Grande do Sul </option>
<option value="SC"> Santa Catarina </option>
<option value="SE"> Sergipe </option>
<option value="SP"> Sao paulo </option>
<option value="TO"> Tocantins </option>
</select> 


                                CEP             <input type="text" name="nome" id="name" value="1" size="10">  <br>    

DDI              <input type="text" name="nome" id="name" value="1" size="5">  
                            
                       


DDD            <input type="text" name="nome" id="name" value="1" size="5">  <br>  

Fone Resid.   <input type="text" name="nome" id="name" value="1" size="10">  
                        
                  

Celular         <input type="text" name="nome" id="name" value="1" size="10">  <br>  

Celular 2       <input type="text" name="nome" id="name" value="1" size="10">  
                        
                   

Fax              <input type="text" name="nome" id="name" value="1" size="10">  <br>  

Fone Com.1  <input type="text" name="nome" id="name" value="1" size="10"> 
                        
                  

Fone Com.2 <input type="text" name="nome" id="name" value="1" size="10">  <br>  

Email             <input type="text" name="nome" id="name" value="1" size="80">          <br>

Home Page    <input type="text" name="nome" id="name" value="1">  
                    
      

Ativo            
<select size="1" name="combo">
<option value="1"> Sim </option>
<option value="2"> Nao </option>
</select>  <br>  

Cadastro       
<select size="1" name="combo">
<option value="1"> Desatualizado </option>
<option value="2"> Atualizado </option>
<option value="3"> Em desenvolvimento</option>
</select>    

                        
    
Cadastrar ?   
<select size="1" name="combo">
<option value="1"> Prospect </option>
<option value="2"> Cliente </option>
</select>    
<br><br>

<input type="button" onClick="addElement()" value="Adicionar Elemento" >
<br><br>		
</div>
</FORM>
</BODY>

</HTML>

Compartilhar este post

Link para o post
Compartilhar em outros sites

macielcr7    9

macielcr7
Postado

use jquery amigo... facilita sua vida....

<script>
$(document).ready(function(){
 //criar div
$('<div></div>')
//adicionar atributos...
.attr('id', 'id_da_div')
.html('Lorem Ipsun Dollor...')
.append('#div');



});
</script>

<div id="div"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

schumi_01    0

schumi_01
Postado

Amigo Jquery é Javascript

 

ahuuhuhhuauha...

 

nem sabia...

 

resolvi de outro jeito...

 

usei as insertrow e insertline e no innerhtml acrescento os input field dentro das celulas...

 

vlw aew...

 

o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito