Making Add Row functionality in Html table using jquery

Step 1:

Add Jquery download file or use the CDN provided :


<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Step 2:

Make your html table ..

 <h3>Add/ Delete Row </h3>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-9">
            <table class="table table-responsive" id="maintable">
                <thead>
                    <tr>
                        <th class="sno">S.No</th>
                        <th class="Particular">Particulars</th>
                        <th class="Qty">Qty</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="data-contact-person">
                        <td>
                                               
                            <input type="text" id="Pro_Sno" value="1" class="form-control " /></td>
                        <td>
                            <input type="text" id="Pro_Part" class="form-control" /></td>
                        <td>
                            <input type="number" id="Pro_Quant" class="form-control" /></td>
                        <td>
                            <button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd" ">Add More</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    <div class="col-md-2"></div>
</div>


Step 3:
//This is the javascript code file :

<script type="text/javascript">
    
    $(document).ready(function () {
        $(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons

            var rowCount = $('.data-contact-person').length + 1;
            var contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" value=' + rowCount + ' id="Pro_Sno" class="form-control" /></td>' +
                '<td><input type="text" id="Pro_Part" class="form-control" /></td>' +
                '<td><input type="number" id="Pro_Quant" class="form-control" /></td>' +
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';
            $('#maintable').append(contactdiv); // Adding these controls to Main table class
        });

        $(document).on("click", ".deleteContact", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 

        });


 });

Note :  I have used bootstrap files here just to provide some css, its optional, if required add bootstrap file too.

Step 4:

Run the Application

You will get the output like this :