Duplicar/Excluir campos de formulários com jQuery

Uma forma bem simples de duplicar e excluir os campos.

Primeiro 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>

Note que no código acima o NAME dos campos estão com “[]” isso por que vamos guardar as informações como array.

Agora o código em jQuery

<script>

/* 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!"); } }); });

</script>