How to Add and Remove Rows Dynamically in a HTML Table
X

Congrats, You are Subscribed to Receive Updates.

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts