Ir para conteúdo

POWERED BY:

Arquivado

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

Thaís Mesquita

Adicionar divs dinamicamente

Por , em Javascript

Recommended Posts

Thaís Mesquita    0

Thaís Mesquita
Postado

Boa noite pessoal!

 

Minha dúvida é a seguinte:

 

Eu tenho uma table que possui os seguintes campos: (exemplo)

 

<table>
  <tr>
	<td>Curso:</td>
	<td><input type="text" name="cursoExtra" size="15"></td>
  </tr>

</table>

Eu quero colocar um botão com o sinal de (+) na frente, que permita que o usuário consiga informar mais cursos (caso existam). Por exemplo: clicou no (+), surge mais uma linha...e assim por diante.

 

Também tenho um exemplo parecido com esse, mas a diferença é que a cada clique no (+) deve aparecer na linha debaixo um nome seguindo uma sequencia. Por exemplo: Curso 1, Curso 2....

 

Será que eu expliquei direito? rsrs

Alguém pode me dar uma luz?

 

Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

você sabe usar o createElement do js?

você pode fazer com ele ou com AJAX, dai você concatena o conteúdo da div, com o conteúdo HTML q você chamou.

infelismente não sei nenhum site q possa falar sobre isso procura no google vai te ajudar =D

hum

exemplo parecido com oq você precisa..

 

elementos.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="cria_elementos.js"></script>
	</head>
	<body>
		<input type="button" name="tabela" id="tabela" value="Criar Tabela" onclick="criarTabela()" />
		 
		<input type="button" name="linha" id="linha" value="Criar Linha" onclick="criarLinha()" style="display: none;" />
		<br />
		<div id="conteudo"></div>
	</body>
</html>

 

cria_elementos.js

var tabela;
var id = 0;
function criarTabela()
{
	var conteudo = document.getElementById('conteudo');
	
	//cria uma tabela
	tabela = document.createElement("table");
	//tabela.setAttribute('width','100%');
	tabela.setAttribute('border','1');
	tabela.setAttribute('id','tbl');
	
	//cria uma linha para o cabeçalho
	var tr = tabela.insertRow(tabela.rows.length);
	tr.bgColor = "#cccccc";
	
	//cria a coluna do nome do produto
	var tdProduto = tr.insertCell(-1);
	tdProduto.innerHTML = "Nome do produto";
	tdProduto.width = "250";
	
	//cria a coluna do nome do produto
	var tdQtd = tr.insertCell(-1);	
	tdQtd.innerHTML = "Quantidade";
	tdQtd.width = "100";
	
	//cria a coluna do nome do produto
	var tdValor = tr.insertCell(-1);	
	tdValor.innerHTML = "Valor";
	tdValor.width = "100";
	
	//cria a coluna do nome do produto
	var tdTotal = tr.insertCell(-1);	
	tdTotal.innerHTML = "Total";
	tdTotal.width = "100";
	
	//cria a coluna de excluir
	var tdExcluir = tr.insertCell(-1);	
	tdExcluir.innerHTML = "Excluir";
	tdExcluir.width = "100";
	
	//coloca a tabela no div
	conteudo.appendChild(tabela);
	
	//mostra o botão para cria as linhas
	document.getElementById('linha').style.display = "block";
	
	//esconde o botão para criar a tabela
	document.getElementById('tabela').style.display = "none";
}

function criarLinha()
{	
	var produto = prompt("Digite o nome do produto", "");
	var quantidade = prompt("Digite a quantidade do produto", "");
	var valor = prompt("Digite o valor do produto", "");
	var total = quantidade * valor;
	
	//cria uma tabela
	var tr = tabela.insertRow(tabela.rows.length);
	tr.id = "tr"+ ++id;
	
	//cria uma coluna para o nome do produto
	tdProduto = tr.insertCell(-1);
	tdProduto.innerHTML = produto;
	
	//cria uma coluna para a quantidade do produto
	tdQtd = tr.insertCell(-1);
	tdQtd.innerHTML = quantidade;	
	
	//cria uma coluna para o valor
	tdValor = tr.insertCell(-1);
	tdValor.innerHTML = valor;		
	
	//cria uma coluna para a quantidade do produto
	tdTotal = tr.insertCell(-1);
	tdTotal.innerHTML = (quantidade * valor);
	if(total > 1500)
	{
		tdTotal.bgColor = "#1E90FF";
	}
	else if(total < 100)
	{
		tdTotal.bgColor = "red";	
	}
	
	
	//cria a coluna do excluir
	tdExcluir = tr.insertCell(-1);
	//tdExcluir.innerHTML = valor;
	//cria o link
	var a = document.createElement("a");	
	a.href = "java script: excluir("+id+")";
	//a.setAttribute("onclick", "excluir()");
	a.appendChild(document.createTextNode("Excluir"));
	
	tdExcluir.appendChild(a);
}

function excluir(id)
{
	var confimacao = confirm("Tem certeza que deseja excluir o produto?");
	
	if(confimacao == true)
	{
		//pega a posição atual da linha(tr)
		var linha = document.getElementById('tr'+id).rowIndex;
		
		//deleta a linha(tr)
		tabela.deleteRow(linha);
		
	}

 

Espero ter ajudado =D

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