In this tutorial we will learning to add or remove table rows dynamically using jQuery. We will use a jQuery .append() method to add a new row inside a HTML Table. Similarly, .remove() method to delete the row from the table.

HTML Table

In this section we will create a HTML Table. We will also create a two button. One button is will add row in the table. While other button will remove the table rows. We will place the add new row button on header section of table. And the remove button at the end of the table.

<div class="col-md-8 col-xs-8 col-md-offset-2 col-xs-offset-2">
                        <div class="table-header" style="padding: 20px; background-color: #6f5499; color: #fff;">
                            <div class="row">
                            <div class="col-sm-6">
                                <h4 class="table-title">Add Data</h4>
                            </div>
                            <div class="col-sm-6">
                            <button type="button" id="add" class="btn btn-primary btn-lg add pull-right" style="width: auto;"><span class="glyphicon glyphicon-plus"></span> Add</button>
                            </div>
                            </div>
                        </div><!-- /.table-header -->
                        <div class="table-body">
                            
                            <table class="table" id="mapping_table" class="form" border="1">
                                <thead>
                                    <tr>
                                        <th>Option</th>
                                        <th>First Data</th>
                                        <th>Second Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            
                            <button type="button" class="btn btn-danger btn-lg raised pull-left delete" name="remove"><span class="glyphicon glyphicon-remove"></span> Remove</button>
                            
                            
                        </div><!-- /.table-body -->
                    </div>

Now you table looks like:

Dynamically add and remove rows

jQuery Script

Here we will write the jQuery script to add and remove table rows.

To add table rows we will be using the .append() method. Let’s look at the script to add the rows.

    var markup = '<tr>' + 
                         '<td>' + 
                         '<input type="checkbox" name="remove">'+
                         '</td><td>'+
                         '<input type="text" name="name1[]" id="name1" class="form-control name1" spellcheck="false" autocomplete="false" style="height: auto; width: 80%; padding: 10px 5px; font-size: 1.4em;">'+
                         '</td><td>'+
                         '<input type="text" name="name2[]" id="name2" class="form-control name2" spellcheck="false" autocomplete="false" style="height: auto; width: 80%; padding: 10px 5px; font-size: 1.4em; ">'+
                         '</td>';
            $("table tbody").append(markup);
        });

This code will add the table rows when you click on the Add button. While you click on the add button, you can see there are three fields. We will use this first field that is select option to delete or remove the specified row from the table. While in the next two input field you can add your data accordingly. Now let’s look at the script to remove the row when the row is selected.

// Find and remove selected table rows
        $(".delete").click(function(){
            $("table tbody").find('input[name="remove"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });

CONCLUSION

In this article, we discussed how we can add and remove HTML Table using jQuery. This is a simple example you can add more complex logic, design and validations as per your requirements. If you wish to add to the discussion or would like to ask a question, leave a comment below.

Comments

  1. You actually make it seem really easy with your presentation but I to find this matter to be actually something which I feel I might never understand. It kind of feels too complex and extremely large for me. I’m having a look ahead for your subsequent submit, I will try to get the hold of it!

Leave a Reply

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