jQuery: Duplicar campos de formulários (2)

Blog

jQuery: Duplicar campos de formulários (2)
Enviado em 18/01/2012 19:06

Olá pessoal!

Muitos leitores gostaram de meu post onde ensinei a duplicar campos de formulários utilizando o jQuery. Bem, volto novamente a ensinar esta dica através do código fonte comentado, porém, com novas funcionalidades! Agora é possível remover linhas da tabela e a definir um limite máximo de linhas! Confira!

Começando com o HTML...

<form action="pagina.php" method="post">
    <table cellpadding="4" cellspacing="0" border="1">
        <thead>
            <tr>
                <td>Dia</td>
                <td>Hora</td>
                <td>Resultado</td>
                <td>Seleção</td>
                <td> </td>
            </tr>            
        </thead>
        <tbody id="repetir">
            <tr id="linha_1">
                <td><input type="text" name="dia[]" value="" /></td>
                <td><input type="text" name="hora[]" value="" /></td>
                <td><input type="text" name="resultado[]" value="" /></td>
                <td>
                	<select name="selecao[]">
                		<option></option>
                		<option value="1">Seleção 1</option>
                		<option value="2">Seleção 2</option>
                		<option value="3">Seleção 3</option>
                	</select>
                </td>
                <td><input type="button" value="Remover" id="remove" onclick="$.removeLinha(this);" /></td>
            </tr>
        </tbody>
        <tfoot>
        	<tr>
            	<td align="right" colspan="5"><input type="button" value="Adicionar" id="add" /><input type="submit" value="Enviar" /></td>
            </tr>
        </tfoot>
    </table>
</form>

No código acima, destaco este trecho de exemplo para explicar...

<input type="text" name="dia[]" value="" />

Para quem não sabe, estas chaves "[]", presentes dentro do atributo name, servem para fazer o formulário guardar as informações de cada linha em uma array, podendo assim serem lidas pelo PHP ou outra linguagem utilizada.

Agora, o código em jQuery que faz tudo acontecer!

/* Função jQuery para remover linha */

$.removeLinha = function (element)
{

	/* Conta quantidade de linhas na tabela */

	var linha_total = $('tbody#repetir tr').length;
	
	/* Condição que mantém pelo menos uma linha na tabela */
	
	if (linha_total > 1)
	{

		/* Remove os elementos da linha onde está o botão clicado */
	
		$(element).parent().parent().remove();
	
	}
	
	/* Avisa usuário de que não pode remover a última linha */
	
	else
	{
	
		alert("Desculpe, mas você não pode remover esta última linha!");
	
	}
	
};

/* Quando o documento estiver carregado… */

$(document).ready(function()
{

	/* Variável que armazena limite de linhas (zero é ilimitada) */
	
	var limite_linhas = 5;
	
	/* Quando o botão adicionar for clicado... */
	
	$('#add').click(function()
	{
	
		/* Conta quantidade de linhas na tabela */
	
		var linha_total = $('tbody#repetir tr').length;
		
		/* Condição que verifica se existe limite de linhas e, se existir, testa se usuário atingiu limite */
		
		if (limite_linhas && limite_linhas > linha_total)
		{
		
			/* Pega uma linha existente */
			
			var linha = $('tbody#repetir tr').html();
			
			/* Conta quantidade de linhas na tabela */
			
			var linha_total = $('tbody#repetir tr').length;
			
			/* Pega a ID da linha atual */
			
			var linha_id = $('tbody#repetir tr').attr('id');

			/* Acrescenta uma nova linha, incluindo a nova ID da linha */
			
			$('tbody#repetir').append('<tr id="linha_' + (linha_total + 1) + '">' + linha + '</tr>');
		
		}
		
		/* Se usuário atingiu limite de linhas… */
		
		else
		{
			alert("Desculpe, mas você só pode adicionar até " + limite_linhas + " linhas!");
		}
							
	});

});

Nota: Incluir o código jQuery acima dentro das tags <script>, é claro!

Confira uma demonstração clicando aqui.

Abraços a todos e façam bom proveito do código! :)

- Leonardo comentou em 19/01/2012 16:44:
- Ola, ficou muito bom, mais me diga se eu quisesse duplicar varias tr como seria? tipo se eu tivesse 10 e quisesse duplicar as 10 de uma so vez.
- Guilherme comentou em 19/01/2012 18:14:
- Olá Leonardo. Talvez você possa usar um loop for limitado a 10 para repetir a inserção das linhas! Abraço!
- Felipe comentou em 20/01/2012 07:25:
- Muito bom ! ficou melhor ainda ! parabens
- Guilherme comentou em 20/01/2012 10:05:
- Obrigado!
- Felipe comentou em 20/01/2012 13:08:
- Acabei de usar aqui no trampo, usei em um campo tipo file, ficou assim: $_FILES[arquivo][ ame][$i] Isso dentro de um for com um count. Funcionou graciosamente !!! :) tanks :)
- Guilherme comentou em 23/01/2012 13:23:
- Ótimo Felipe :) obrigado!
- Washington Patrício comentou em 25/01/2012 10:57:
- Fantástico! Sem dúvidas é muito usual.
- Carine comentou em 15/02/2012 09:03:
- Gente, estou usando da mesma forma que foi montado aqui, nao mudei uma linha sequer do JS e quando clico em remover a ultima linha q dá o alerta de erro, ao fechar o alerta ele redireciona a minha página para a saída do form. Como resolver?
- Guilherme comentou em 15/02/2012 10:52:
- Olá Carine, tentei simular o erro mas não consegui. Tente acrescentar "return false" no final da função $.removeLinha (antes do fechamento da chave "}". Talvez isso dê certo! Abraço!