Search in This Blog

Add html tag dynamically in html

Add html tag dynamically in html

<script src="jquery-2.1.1.js" language="javascript" type="application/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var ID = 1;
        function addRow() {
            var html =  '<tr>' +
                        '<td>Name: <input type="text" name="aa' + ID + '" /></td>' +
                        '<td>File: <input type="file" name="fileUpload' + ID + '" /></td>' +
                        '<td><input type="button" class="BtnPlus" value="+" /></td>' +
                        '<td><input type="button" class="BtnMinus" value="-" /></td>' +
                        '</tr>'
            $(html).appendTo($("#Table1"))
            ID++;
        };
        $("#Table1").on("click", ".BtnPlus", addRow);
        function deleteRow() {
            if(ID==1) return;
            var par = $(this).parent().parent();
            par.remove();
            ID--;
        };
        $("#Table1").on("click", ".BtnMinus", deleteRow);
    });
</script>
<table id="Table1" cellspacing="3">
    <tr>
        <td>Name: <input type="text" name="aa0"  id="aa0" /></td>
        <td>File: <input type="file" name="fileUpload0"/></td>
        <td><input type="button" class="BtnPlus" value="+" /></td>
        <td><input type="button" class="BtnMinus" value="-" /></td>
    </tr>
</table>
Previous
Next Post »