Jquery Dynamic Form Row up, Row down

Dynamic form with add number auto

by Akram kamal

HTML

<table id="field">
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><a href="#" class="fieldUp">Row Up</a> | <a href="#" class="fieldDown">Row Down</a></td>
    </tr>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

<script id="template" type="text/template">
<tr>
    <td class="number">Alternatif</td>
    <td><input type="text" /></td>
     <td><a href="#" class="fieldUp">Row Up</a> | <a href="#" class="fieldDown">Row Down</a></td>
</tr>
</script>

JavaScript

$( document ).ready(function() {
    
    $("#addField").click(function( event ) {
        $($("#template").html()).appendTo($("#field tbody")).show( "slow" );
        if( $("td").hasClass("number") ) {
            var i = parseInt($(".num:last").text())+1;
            $( $("<span class='num'> "+ i +" </span>") ).appendTo($(".number")).closest("td").removeClass('number');
        }
        event.preventDefault();
    });
    
    $("#deleteField").click(function( event ) {
        var lengthRow = $("#field tbody tr").length;
        if( lengthRow > 1 )
            $("#field tbody tr:last").remove();
        event.preventDefault();
    });
    
    $(document).on("click", ".fieldUp, .fieldDown", function( event ) {
        var row = $( event.target ).closest('tr');
        if( $(this).is(".fieldUp") )
            row.insertBefore(row.prev());
        else
            row.insertAfter(row.next());
        event.preventDefault();
    });
    
});