[Resolvido] Duplicação infinita de <tr> de uma table

[Thiago Paschoalin 0]

E ai rapaziada, eu quero criar um botão para duplicar uma coluna especifica de uma tabela, e quero que duplique exatamente com o que a principal coluna contenha.

 

<form enctype="multipart/form-data">
<table>
<tr><td><a href="javascript:AddColuna('TRimg');">Add Upload</a> | <a href="javascript:DelColuna('TRimg');">Del Upload</a></td></tr>
<tr id="TRimg"><td>Imagem: <input name="imagens[]" type="file" class="Verdana_12_AzulB" size="60"></td></tr>
</table>
</form>

 

 

E complicando a pergunta, um tipo de contador para saber e mostrar na tela quantas colunas existem na tela.

 

E uma pergunta técnica, se ela for DELETADA, ela é destruida ?

O motivo da pergunta é pq essa imagem será add no banco e na pasta, então se por ventura o internauta tenha add coluna e escolhida uma imagem e depois deletar esta coluna, teria que destruir o upload.

 

 

Grato desde já.

[Ramon Almeida 0]

Se você estiver usando JQuery pode fazer assim:

 

Para add uma tr igual a primeira:

 

$("table").append(<tr id="TRimg"><td>Imagem: <input name="imagens[]" type="file" class="Verdana_12_AzulB" size="60"></td></tr>)

 

Para verificar quantos tr existem:

$("tr").size()

ou

$("tr").length

[Thiago Paschoalin 0]

Fala Ramon, na verdade não... sem uso de JQuery...

Inclusive, voltei a pouco tempo a me dedicar a programação, e estou meio por fora....

Estou já procurando apostilas e tutoriais sobre jquery, ajax, php5,...

 

 

Se não for muito abuso de minha parte, poderia mostrar um exemplo prático como faço isso ?

Os botões de ADD e DEL <tr>, onde e como coloco essas tags ?

 

Grato desde já....

[William Bruno 1501]

@Thiago, olhe este:

http://www.wbruno.com.br/blog/2011/04/01/adicionar-inputs-opcao-de-remove-los/

 

funciona bem, e facilmente você altera para o conteudo que você quer.

[Ramon Almeida 0]

Então Thiago,

não é complicado utilizar o JQuery, basta você saber o básico de javascript. Dá uma olhada neste tutorial que vai te dar uma base, se tiver duvidas de como tal função funciona, efeitos e etc, você pode dar uma olhada na documentação que é bem detalhada:

 

http://docs.jquery.com/Main_Page

 

Abaixo o exemplo que você pediu:

 

HTML:

 

<form enctype="multipart/form-data">
<table>
<tr>
 <td><a href="#" id="add">Add Upload</a></td>
 <td>Remover</td>
</tr>

</table>
</form>
 <p>Quantidade de Uploads: <span id="count">0</span></p>

 

JavaScript:

  $(document).ready(function(){
   $("a#add").click(function(){
     $("table").append('<tr id="TRimg"><td>Imagem: <input name="imagens[]" type="file"class="Verdana_12_AzulB" size="60"></td><td><a href="#" class="del">X</a></td></tr>');//Add mais uma tr
     setCount(); //Chama função que mostra quantidade de Uploads
     return false;// Return false para não atualizar a página
   });

   $("table").delegate('a','click',function(){  
      $(this).parent('td').parent('tr').remove();//Navega entre os elementos do dom e deleta a tr onde está o link
      setCount();
   });  

   function setCount(){
     var n = $("tr").size(); // Pega a quantidade de tr que existe no documento
     $("#count").text(n-1); // Substitui o valor de do span com id count, -1 pelo fato de não contarmos a 1º linha.
   }
});

 

Coloquei no JSBin para você ver funcionando:

 

http://jsbin.com/ezefi5/3

 

se tiver mais alguma duvida é só perguntar...

[Thiago Paschoalin 0]

Haaaaaaaaaaaaaaaa..... QUE MARAVILHAAA !!!! Com certeza vou estudar muito mais sobre o assunto, é muito show e vendo por cima ajudará em 'N' problemas que já tive.....

 

@Willian, funciona redondo !!! Obrigado.

 

Ramon, só faltou o include do arquivo "jquery-1.5.1.min.js" no seu código, mas PERFEITO tb !!!!!

Já estou lendo o tuto que me mandou, e vou com certeza me aprofundar no assunto....

 

Agora, só uma pergunta Ramon, onde está a function DEL ? O 'X' deleta o TR, porém não existe nenhuma referência no jquery dentro do script...

 

 

E posso ser chato só mais um pouquinho??!!!

- hehehe, um botão para deletar TODAS as TRs criadas, como seria ? Se for complicar muito pode deixar...

- Colocar o valor de "count" dentro de um input hidden ?

 

 

Fico muito grato pelas ajudas !!!!

 

Abraços, TGP !

 

[William Bruno 1501]

Agora, só uma pergunta Ramon, onde está a function DEL ?

no script do Ramon, está aqui:

$("table").delegate('a','click',function(){ 

o metodo .remove() é que exclui a TR.

 

os 2 scripts ficaram bem parecidos na verdade :lol:

[Thiago Paschoalin 0]

Realmente, os códigos estão bem próximos mesmo.....

 

Sabe me falar William, como coloco esse contador dentro de um input hidden para jogar depois no POST do form ???

[William Bruno 1501]

como coloco esse contador dentro de um input hidden

sei sim, mas assim cara.. desnecessário e trabalhoso isso.

 

antes de implementar algo, pense se você realmente precisa daquilo... pelo que imaginei da situação, não é necessário.

[Thiago Paschoalin 0]

Na verdade, posteriormente isso será add no MySql com vários outros POSTs, e tenho um FOR para contar as imagens que foram inseridas, então precisaria deste valor do contador...

 

Dá uma olhada, fiz assim:

 

 

function setCount(){
var n = $("tr").size(); // Pega a quantidade de tr que existe no documento
$("#count").text(n-1); // Substitui o valor de do span com id count, -1 pelo fato de não contarmos a 1º linha.

var objetoDados = document.getElementById("dados");
objetoDados.value = (n-1);
}

<input type="text" id="dados">

 

 

Funcionou, o unico problema é que o valor inicial não aparece, somente quando ADD nova linha começa a funcionar.

 

 

@EDIT: Resolvido... hhehehe... só dar um VALUE inicial para o TEXT... fui oco nessa heim... kkkkk

<input type="text" id="dados" value="1">

 

Abraços !!!!! E MUITO OBRIGADO.

[William Bruno 1501]

então precisaria deste valor do contador...

na verdade, você não precisa desse contador no js, pode fazer direto no php, ou asp.. sei la.

 

mais simples :lol:

[Ramon Almeida 0]

Abaixo a função pra remover:

 

Adiciono uma id na primeira tr para identifica-la:

<tr id="desc">
 <td><a href="#" id="add">Add Upload</a></td>
 <td>Remover (<a href="#" id="rmall">Remover Todos</a>)</td>
</tr>

 

e a função para remover todas tr menos a primeira:

 

$("a#rmall").click(function(){
     $("tr").not("#desc").remove();
     setCount();
     return false;
   });

 

Resultado no JSBin: http://jsbin.com/ezefi5/5

 

No seu ultimo post, você alterou a função setCount com as duas linhas abaixo:

var objetoDados = document.getElementById("dados");
objetoDados.value = (n-1);

 

Como você já está utilizando JQuery no seu script, você pode substituir por:

 

$("#dados").val(n-1);

 

Abraços. =)

[Thiago Paschoalin 0]

AEE Ramon, show de bola, mas ao invés de deletar as TRs que NÃO tenham id="desc", como seria para deletar somente as QUE TEM este id ????

Inclusive você me resolvendo isso, resolve o problemão aqui, que esse TR é criado em TODAS as tabelas que existem na página... heheheh

E o contador, está contando todas as <tr> de todas as tabelas...

 

Então imagino se identificar qual tabela quero, resolva tudo isso...

 

tentei fazer isso abaixo, mas ai não funfou...

 

$("a#add").click(function(){
	//Add mais uma tr
	$("table").append('<tr><td>Imagem: <input name="imagens[]" type="file" size="60"></td><td><a href="#" class="del">X</a></td></tr>');
	setCount();
	return false;
});

 

 

 

$("a#add").click(function(){
	//Add mais uma tr
	$("table").[color="#FF0000"]("#tabelaImages")[/color].append('<tr><td>Imagem: <input name="imagens[]" type="file" size="60"></td><td><a href="#" class="del">X</a></td></tr>');
	setCount();
	return false;
});

[Ramon Almeida 0]

faz assim:

 

$(table#tabelaimages").append()

 

pra remover todos:

 

$("#tabelaimages tr").not().remove()

 

O Jquery Selector trabalha semelhante ao css.

Abraços.

[Thiago Paschoalin 0]

Puts.... esqueci só de uma perguntinha, mas antes....

 

PERFECTO Ramon !!!!! você é show meu querido....

 

 

Pergunta somente para organização de programação... fico louco quando as tags passam de uma linha, parece um código jogado... huahuahuahua... EU SEI, SOU LOUCO...... kkkkkkkk

 

Como faço isso ?

 

 

$("table#tabelaimages").append('
<tr height="30">
   <td>Imagem: <input name="imagens[]" type="file" size="60"></td>
   <td><a href="#" class="del"> X </a></td>
   </tr>
');

Pular linha dentro do append... usando '+ +' como java já vi que não dá...

 

Haaaa... "putz, quanta coisa né".... como coloco um LIMITE de trs ? Tipo, limitar a 10 linhas por upload.

[Ramon Almeida 0]

Da pra fazer colocando barra invertida:

 

$("table#tabelaimages").append(' \
       <tr height="30"> \
   <td>Imagem: <input name="imagens[]" type="file" size="60"></td> \
   <td><a href="#" class="del"> X </a></td> \
   </tr> \
');