Duplicar campos de formulários de um jeito simples com jQuery

Uma forma bem simples de duplicar os campos.

Primeiro o HTML

<form action="form.php" method="post">
    <table cellpadding="4" cellspacing="0" border="1">
        <thead>
            <tr>
                <td>Dia</td>
                <td>Hora</td>
                <td>Resultado</td>
            </tr>            
        </thead>
        <tbody id="repetir">
            <tr>
                <td><input type="text" name="dia[]" value="" /></td>
                <td><input type="text" name="hora[]" value="" /></td>
                <td><input type="text" name="resultado[]" value="" /></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td align="right" colspan="3"><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>

$(function(){ /* Quando o botão adicionar for clicado... */ $('input#add').click(function(){ /* Pega uma linha existente */ var linha = $('tbody#repetir tr').html(); /* Acrescenta uma nova linha */ $('tbody#repetir').append('<tr>' + linha + '</tr>'); }); });

</script>