Ir para conteúdo

POWERED BY:

Arquivado

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

knoxville

Adicionar Linha Em Tabela E campo text

Por , em Javascript

Recommended Posts

knoxville    0

knoxville
Postado

fala galera, beleza?

to fazendo um sisteminha de indicar uma página a um amigo, e aí quero que tenha a opção de indicar mais de um amigo...

seria o seguinte, a principio tem só um campo de e-mail do amigo, mas na frente dele tem um botão "+", conforme tá no código que vou colar em baixo

eu quero que ao clicar no botão, ele coloque mais uma linha da tabela da que tá em negrito, pra abrir o campo pra convidar mais um amigo, LIMITE DE 5 AMIGOS

alguem me ajuda com esse script?

<table width="304" border="0">

<tr>

<td width="98">Seu e-mail: </td>

<td width="150"><input name="email" type="text" id="email"></td>

<td width="25"> </td>

</tr>

<tr>

<td>E-mail amigo: </td>

<td><input name="amigo" type="text" id="amigo"></td>

<td><input type="button" value="+"></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" value="Enviar"></td>

<td> </td>

</tr>

</table>

vlw! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

knoxville    0

knoxville
Postado

é exatamente isso que eu kero fazer, mas pra falar a verdade, AJUDAR não ajuda muito não.. hehe :( porque eu não entendi nada :( sou fraquinho em JS

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Abaixo um exemplo de como adicionar e remover uma linha:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Adicionando e removendo elementos dinamicamente</title><script type="text/javascript">//<![CDATA[function preencheLista(){	var tabela 	= document.getElementById("tBody-lista");	var ultima 	= tabela.rows.length;	var linha 	= document.createElement("tr");	linha.setAttribute("id","line"+ultima);		var celula1 	= document.createElement("td");	var nodotexto1 	= document.createTextNode("teste"+ultima);	celula1.appendChild(nodotexto1);	linha.appendChild(celula1);		var celula2 	= document.createElement("td");	var nodotexto2 	= document.createTextNode("teste"+ultima);	celula2.appendChild(nodotexto2);	linha.appendChild(celula2);		var celula3 	= document.createElement("td");	var nodotexto3 	= document.createTextNode("teste"+ultima);	celula3.appendChild(nodotexto3);	linha.appendChild(celula3);		var celula4 	= document.createElement("td");	var link		= document.createElement('a');	link.setAttribute('href','java script: void(0)');	link.setAttribute('title','Apagar');	link.setAttribute('rel','line'+ultima);	link.className	= 'link';	link.onclick	= function()	{		document.getElementById("tBody-lista").removeChild(document.getElementById(this.getAttribute("rel")));	};	var texto 		= document.createTextNode("Apagar");	link.appendChild(texto);	celula4.appendChild(link);	linha.appendChild(celula4);	tabela.appendChild(linha);}//]]></script></head><body><form id="f" action="#" method="post"><fieldset><input type="button" id="adicionar" name="adicionar" value="Adicionar" onclick="preencheLista()" /><br /><br /></fieldset></form><table border="1px">	<tbody id="tBody-lista">		<tr><td>teste</td><td>teste</td><td>teste</td><td>teste</td></tr>	</tbody></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

knoxville    0

knoxville
Postado

oopa, peguei mais ou menos o jeito! :)

a função de apagar uma linha eu tirei... mas já coloquei a tabela no esquema que eu quero

agora tenho 2 duvidas...

1) como faço para desabilitar os botões de adicionar quando eles atingirem 5 linhas

2) como faço para inserir tags html nessas novas células?

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Adicionando e removendo elementos dinamicamente</title><script type="text/javascript">//<![CDATA[function preencheLista(){	var tabela	 = document.getElementById("tBody-lista");	var ultima	 = tabela.rows.length;	var linha	 = document.createElement("tr");	linha.setAttribute("id","line"+ultima);		var celula1	 = document.createElement("td");	var nodotexto1	 = document.createTextNode("E-mail amigo: ");	celula1.appendChild(nodotexto1);	linha.appendChild(celula1);		var celula2	 = document.createElement("td");	var nodotexto2	 = document.createTextNode("<input name=\"amigo\" type=\"text\" id=\"amigo\">");	celula2.appendChild(nodotexto2);	linha.appendChild(celula2);		var celula3	 = document.createElement("td");	var nodotexto3	 = document.createTextNode(" ");	celula3.appendChild(nodotexto3);	linha.appendChild(celula3);		tabela.appendChild(linha);}//]]></script></head><body><table width="304" border="1"><tr><td width="98">Seu e-mail: </td><td width="150"><input name="email" type="text" id="email"></td><td width="25"> </td></tr><tbody id="tBody-lista"><tr><td>E-mail amigo: </td><td><input name="amigo" type="text" id="amigo"></td><td><input type="button" value="+" onclick="preencheLista()"></td></tr></tbody><tr><td> </td><td><input type="submit" value="Enviar"></td><td> </td></tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

vagner.net    0

vagner.net
Postado

Da uma olhada nesse código pra ver se isso te ajuda:

<script>function addEmail(){	if (document.getElementsByName('amigo').length < 5)				document.getElementById('to').appendChild(document.getElementById('teste').cloneNode(true));}window.onload=function(){ document.getElementById("add").onclick	   = addEmail; }</script><table>	<tr>		<td>			Seu e-mail:		</td>		<td >			<input name="email" type="text" id="email" />		</td>		<td>			<input type="button" value="Enviar" />		</td>	</tr>	<tr>		<td style="vertical-align:top;">			E-mail amigo:		</td>		<td id=to>			<div id=teste>				<input type="text" id="amigo" name="amigo" />			</div>		   		</td>		<td style="vertical-align:top;">			<input type="button" value="+" id="add" />		</td>	</tr></table>

FONTE: W3SCHOOLS

 

OK..!!?? T+...

Compartilhar este post

Link para o post
Compartilhar em outros sites

knoxville    0

knoxville
Postado

vagner.net, era exatamente isso que eu queria! :)

mas ai tive um problema... como o nome dos campos ele duplica, na hora de pegar o que foi postado, ele só retorna o que tá dentro do ultimo campo...

enfim, ao menos já me respondeu a primeira pergunta... eu coloquei o if pra só aceitar máximo de 5 amigos...

vou usar mesmo o code que o hunternh havia passado. agora ainda não consegui colocar tags html na outra linha! :(

<html><head><title>Adicionando e removendo elementos dinamicamente</title><script type="text/javascript">//<![CDATA[function preencheLista(){if (document.getElementById("tBody-lista").rows.length < 5) {	var tabela = document.getElementById("tBody-lista");	var ultima = tabela.rows.length;	var linha = document.createElement("tr");	linha.setAttribute("id","line"+ultima);		var celula1 = document.createElement("td");	var nodotexto1 = document.createTextNode("E-mail amigo:");	celula1.appendChild(nodotexto1);	linha.appendChild(celula1);		var celula2	 = document.createElement("td");	var nodotexto2	 = document.createTextNode("<input name=\"amigo"+ultima+"\" type=\"text\" id=\"amigo\">");	celula2.appendChild(nodotexto2);	linha.appendChild(celula2);		var celula3	 = document.createElement("td");	var nodotexto3	 = document.createTextNode(".");	celula3.appendChild(nodotexto3);	linha.appendChild(celula3);		tabela.appendChild(linha);}}//]]></script></head><body><table width="304" border="1"><tr><td width="98">Seu e-mail:</td><td width="150"><input name="email" type="text" id="email"></td><td width="25"> </td></tr><tbody id="tBody-lista"><tr><td>E-mail amigo:</td><td><input name="amigo" type="text" id="amigo"></td><td><input type="button" value="+" onclick="preencheLista()"></td></tr></tbody><tr><td> </td><td><input type="submit" value="Enviar"></td><td> </td></tr></table></body></html>
também preferi este pois ele coloca o + na linha que foi adicionada, e adiciona em nova linha, nao na mesma, fica um pouco mais organizado (claro que isso também fica facil de arrumar no code que passou)

ali como podem ver também coloquei o negócio pra mudar o name do input text!

 

quanto às tags html, alguem tem uma dica? :)

 

brigadão! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

vagner.net    0

vagner.net
Postado

http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Ou assim:

<script>function addEmail(){	if (document.getElementsByName('amigo').length < 5){		var linha = document.getElementById('table').insertRow(document.getElementById('table').rows.length);				linha.insertCell(0);		linha.insertCell(1).appendChild(document.getElementById('amigo').cloneNode(true));		linha.insertCell(2).appendChild(document.getElementById('add').cloneNode(true));	}}</script><table id="table">	<tr>		<td>			Seu e-mail:		</td>		<td >			<input name="email" type="text" id="email" />		</td>		<td>			<input type="button" value="Enviar" />		</td>	</tr>	<tr>		<td style="vertical-align:top;">			E-mail amigo:		</td>		<td>			<input type="text" id="amigo" name="amigo" />		</td>		<td>			<input type="button" value="+" id="add" onclick="addEmail();" />		</td>	</tr></table>

como o nome dos campos ele duplica, na hora de pegar o que foi postado, ele só retorna o que tá dentro do ultimo campo...

Não retorna só último. Se você tratar o retorno do formulário submetido como um array, você pode pegar o valor de todos os elementos que possuem o mesmo nome.

 

OK...!!?? T+...

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Adicionando e removendo elementos dinamicamente</title><script type="text/javascript">//<![CDATA[function preencheLista(){	var tabela	 = document.getElementById("tBody-lista");	var ultima	 = tabela.rows.length;	var linha	 = document.createElement("tr");		if(ultima == 5) return;		linha.setAttribute("id","line"+ultima);		var celula1	 = document.createElement("td");	var nodotexto1	 = document.createTextNode("E-mail amigo: ");	celula1.appendChild(nodotexto1);	linha.appendChild(celula1);		var celula2	 = document.createElement("td");	var input	 = document.createElement("input");	input.setAttribute("type","text");	input.setAttribute("name","amigo[]");	input.setAttribute("id","amigo"+ultima);	celula2.appendChild(input);	linha.appendChild(celula2);		var celula3	 = document.createElement("td");	var nodotexto3	 = document.createTextNode(" ");	celula3.appendChild(nodotexto3);	linha.appendChild(celula3);		tabela.appendChild(linha);}//]]></script></head><body><table width="304" border="1"><tbody id="tBody-lista"><tr><td width="98">Seu e-mail: </td><td width="150"><input name="email" type="text" id="email"></td><td width="25"> </td></tr><tr><td>E-mail amigo: </td><td><input name="amigo[]" type="text" id="amigo"></td><td><input type="button" value="+" onclick="preencheLista()"></td></tr></tbody></table><input type="submit" value="Enviar"></body></html>
Como o vagner.net falou:

Não retorna só último. Se você tratar o retorno do formulário submetido como um array, você pode pegar o valor de todos os elementos que possuem o mesmo nome.

Não sei como qual linguagem você está usando para receber os dados desse formulário, mas no caso de estar usando PHP, tem que fazer como no exemplo acima "amigo[]", isso fará com que o PHP interprete os campos "amigo" como um array.

Compartilhar este post

Link para o post
Compartilhar em outros sites

knoxville    0

knoxville
Postado

exatamente! :)

bom, se alguem um dia precisar, ta aqui...

 

tabela.htm

<script><!--function addEmail(){	if (document.getElementsByName('amigo[]').length < 5){		var linha = document.getElementById('table').insertRow(document.getElementById('table').rows.length);		linha.insertCell(0);		linha.insertCell(1).appendChild(document.getElementById('amigo').cloneNode(true));		linha.insertCell(2).appendChild(document.getElementById('add').cloneNode(true));	}}--></script> <form method="post" action="teste.php"> <table width="285" border="0"> <tr> <td width="100"><font face="verdana" size="2">Seu e-mail:</font></td> <td width="145"><input name="email" type="text" id="email" size="20"></td> <td width="10"> </td> </tr> <tbody id="table"> <tr> <td style="vertical-align:top;"><font face="verdana" size="2">E-mail amigo:</font></td> <td><input type="text" id="amigo" name="amigo[]"></td> <td><input type="button" value="+" id="add" onclick="addEmail();"></td> </tr> </tbody> <tr> <td> </td> <td><input type="submit" value="Enviar"></td> <td> </td> </tr> </table> </form>
teste.php

<?if ($_POST['amigo']) {$teste = $_POST["amigo"];print ($teste[0]) ? $teste[0]."<br>" : "<br>";print ($teste[1]) ? $teste[1]."<br>" : "<br>";print ($teste[2]) ? $teste[2]."<br>" : "<br>";print ($teste[3]) ? $teste[3]."<br>" : "<br>";print ($teste[4]) ? $teste[4]."<br>" : "<br>";}?>
essa parte do print eu coloquei só pra testar! :) na hora de fazer o script de enviar realmente o e-mail, eu coloco da melhor forma, que ainda não parei pra pensar qual vai ser! hehe

 

hunternh e vagner.net, MUITO OBRIGADO pela ajuda de vocês!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

quando conseguir knoxville posta que ajudará muita gente!!!

 

abraçoo

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

isto é perto do que preciso, porem necessito fazer algumas modificações

 

<script>function addEmail(){		var linha = document.getElementById('table').insertRow(document.getElementById('table').rows.length);		linha.insertCell(0);		linha.insertCell(1).appendChild(document.getElementById('email').cloneNode(true));}</script><tbody id="table"><tr> <td class="direita">E-mail</td> <td class="direita"><input type="Text" name="email[]" id="email" maxlength="60" size="45"></td> <td class="direita"><a href="java script: addEmail()">adicione outro</a></td></tr></tbody>
preciso que o cara posa deletar linhas e que capture os e-mail independente de quantos sejam

teria como alguem me ajudar...

pois usarei isso muito

falow[]

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