Ir para conteúdo

POWERED BY:

Arquivado

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

cmaoliveira

Criando campos dinamicamente

Por , em Javascript

Recommended Posts

cmaoliveira    0

cmaoliveira
Postado

Estou fazendo um formulário que adiciona campos dinamicamente, usando a função abaixo:

function add()			{								// cria elementos				var linha = document.createElement("tr"); // nova linha				var col1 = document.createElement("td"); // coluna 1				var col2 = document.createElement("td"); // coluna 2				var col3 = document.createElement("td"); // coluna 3				var text = document.createElement("textarea"); // campo textarea				var sel = document.createElement("select"); // campo select				var img1 = document.createElement("img"); // imagem adicionar				var img2 = document.createElement("img") // imagem remover				var br = document.createElement("br"); // br				var referencia = document.getElementById("tr1");				var parentTag = referencia.parentNode;												// seta atributos para os elementos				img1.setAttribute("src", "../imagens/bt_adicionar.jpg");				img2.setAttribute("src", "../imagens/bt_remover.jpg");				sel.setAttribute("style","width:120px;");								linha.appendChild(col1);				linha.appendChild(col2);				linha.appendChild(col3);				col1.appendChild(sel);				col2.appendChild(text);				col3.appendChild(img1);				col3.appendChild(img2);								parentTag.insertBefore(linha, referencia.nextSibling);							}

Até aí tudo bem.O problema é o seguinte, preciso colocar 2 br's entre img1 e img2.já tentei colocar assim:

img1.appendChild(br);

só q apresenta o erro: "Chamada inesperada para acesso à propriedade ou métodoe assim:

img2.parentNode.insertBefore(br, img2);

e também aprensenta erro: "'parentNode' é nulo ou não é um objeto"estou fazendo alguma coisa errada??? como eu posso fazer isso???

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Olá

 

Você tem que criar um id para o objeto criado

 

ai vai um exemplo, fiz ele incluir uma imagem dentro da outra, pois ele colocar um BR como as imagens estão dentro de uma tabela não vai fazer um efeito visual entre as imagens

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Teste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>function add()	{		// cria elementos		var linha = document.createElement("tr"); // nova linha		var col1 = document.createElement("td"); // coluna 1		var col2 = document.createElement("td"); // coluna 2		var col3 = document.createElement("td"); // coluna 3		var col4 = document.createElement("td"); // coluna 3		var div = document.createElement("div"); // coluna 3		var text = document.createElement("textarea"); // campo textarea		var sel = document.createElement("select"); // campo select		var img1 = document.createElement("img"); // imagem adicionar		var img2 = document.createElement("img") // imagem remover		var br = document.createElement("br"); // br		var referencia = document.getElementById("Layer1");		var parentTag = referencia.parentNode;						// seta atributos para os elementos		img1.setAttribute("src", "http://www.terra.com.br/logo.gif");		img2.setAttribute("src", "http://www.terra.com.br/logo.gif");		sel.setAttribute("style","width:120px;");				linha.appendChild(col1);		linha.appendChild(col2);		linha.appendChild(col3);		linha.appendChild(col4);		col1.appendChild(sel);		col2.appendChild(text);		col3.id = "imagem1";		col3.appendChild(img1);		col4.id = "imagem2";		col4.appendChild(img2);				parentTag.insertBefore(linha, referencia.nextSibling);			}	function incluirbreak() {		var img1 = document.createElement("img"); // imagem adicionar		img1.setAttribute("src", "http://home.img.uol.com.br/h1/logo-uol10anos.gif");		var br = document.createElement("br"); // br		var img3 = document.getElementById("imagem1"); // imagem adicionar		img3.appendChild(img1);	}</script></head><body onLoad="add();"><div id="Layer1"></div><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p>  <input type="button" name="Button" value="Button" onClick="incluirbreak();"></p></body></html>

Espero ter ajudo

 

Benck

Compartilhar este post

Link para o post
Compartilhar em outros sites

cmaoliveira    0

cmaoliveira
Postado

Obrigada Benck.

 

Eu tinha conseguindo após alterar uns trechos no código, ficou assim:

 

function add()			{								// cria elementos				var linha = document.createElement("tr"); // nova linha				var col1 = document.createElement("td"); // coluna 1				var col2 = document.createElement("td"); // coluna 2				var col3 = document.createElement("td"); // coluna 3				var text = document.createElement("textarea"); // campo textarea				var sel = document.createElement("select"); // campo select				var img1 = document.createElement("img"); // imagem adicionar				var img2 = document.createElement("img") // imagem remover				var br = document.createElement("br"); // br				var br2 = document.createElement("br"); // br 				var referencia = document.getElementById("tr1");				var parentTag = referencia.parentNode;												// seta atributos para os elementos				img1.setAttribute("src", "../imagens/bt_adicionar.jpg");				img2.setAttribute("src", "../imagens/bt_remover.jpg");				sel.setAttribute("style","width:120px;");				linha.appendChild(col1);				linha.appendChild(col2);				linha.appendChild(col3);				col1.appendChild(sel);				col2.appendChild(text);				col3.appendChild(img1);				col3.appendChild(br);				col3.appendChild(br2);				col3.appendChild(img2);								parentTag.insertBefore(linha, referencia.nextSibling);							}

O único problema agora é com o IE, eu defini o tamanho do select em 120 px

 

sel.setAttribute("style","width:120px;");

O IE não está obedecendo isso, no firefox está normal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Adicione o atributo style dessa forma, para o IE:

sel.style.width = "120px";
Ou então, faça um css separado e mude a classe com js. O IE interpreta essa mudança de classes de forma diferente dos outros navegadores, também. O jeito é você setar dois atributos:

sel.setAttribute("class", "class_do_css"); sel.setAttribute("className", "class_do_css"); // para o IE

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