How to Add and Remove Rows Dynamically in a HTML Table

How to Add and Remove Rows Dynamically in a HTML Table.  Here we are going to talk about the tables and how can we process the rows by inserting new rows and remove it dynamically. Its quite good one for the time of cart creations.  if you are creating a dynamic tables , say for example, you can create invoice table, shopping cart product cart and few others, its important to create the dynamic row of field and table datas. Here i am giving some code to create dynamic rows.

The following HTML code is our base to start making dynamic table with rows and columns.

<table class="kvcodes-dynamic-rows-example">
    <tr>
        <td>First Name</td>
        <td>Last Name</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="first_name" />
        </td>
        <td>
            <input type="text" name="last_name" />
        </td>
        <td><a class="remove">remove</a></td>
    </tr>
</table>
<a href="#" title="" class="add-rows"> + Add Rows</a>

Here its will get us a table with single row.  Here we are going to add some contents to add more rows in it. Let’s write the jQuery code to create dynamic rows.

$(function() {
    
    var $table = $('table.kvcodes-dynamic-rows-example'),
        counter = 1;
    
    $('a.add-rows').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = 
            '<tr> <td><input type="text" name="first_name' + counter + '"/></td>' +
                '<td><input type="text" name="last_name' + counter + '"/></td>' +
                '<td><a href="#" class="remove-rows"> - remove</a></td> </tr>';
        $table.append(newRow);
    });
    
    $table.on('click', '.remove-rows', function() {
        $(this).closest('tr').remove();
    });
});

The above code will do the operation to add more rows in it.