Open In App

How to Dynamically Add/Remove Table Rows using jQuery ?

Last Updated : 14 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to dynamically add/remove rows from an HTML table using jQuery. Before reading this article, make sure you have some basic idea about jQuery, its in-built methods, and element selection.

jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc.

Adding a row

To add a row, we will use the append() method. The append() method takes the HTML as a parameter in the form of a string and appends it to the selected element as its child. We will attach a click event to the button and use the append method to append the HTML and create a new row once the user clicks the button.

Removing a row

The remove() method of jQuery will be used to remove the selected element. You just need to select the element to be removed using the jQuery selector’s syntax and use the remove method on the element that you want to remove. Here again, a remove button will be generated dynamically with the addition of the new row which removes the corresponding row once user clicks the button.

Example: The below example will show the practical implementation of Adding and Deleting rows dynamically from an HTML table using jQuery.

HTML




<!DOCTYPE html>
<html>
 
<head>
<!-- Bootstrap CSS CDN -->
<link href=
      rel="stylesheet"
      integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous">
</head>
 
<body>
    <div class="container pt-4">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">
                              Row Number
                          </th>
                        <th class="text-center">
                              Remove Row
                          </th>
                    </tr>
                </thead>
                <tbody id="tbody">
 
                </tbody>
            </table>
        </div>
        <button class="btn btn-md btn-primary"
                id="addBtn" type="button">
            Add New Row
        </button>
    </div>
 
<!-- Bootstrap JS CDN -->
    <script src=
        integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous">
    </script>
<!-- jQuery CDN -->
    <script src=
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer">
      </script>
<script>
    $(document).ready(() => {
        let count=1;
 
        // Adding row on click to Add New Row button
        $('#addBtn').click(function () {
            let dynamicRowHTML = `
            <tr class="rowClass"">
                <td class="row-index text-center">
                    Dynamically added Row ${count}
                </td>
                <td class="text-center">
                    <button class="btn btn-danger remove"
                        type="button">Remove
                    </button>
                </td>
            </tr>`;
            $('#tbody').append(dynamicRowHTML);
            count++;
        });
 
        // Removing Row on click to Remove button
        $('#tbody').on('click', '.remove', function () {
            $(this).parent('td.text-center').parent('tr.rowClass').remove();
        });
    })
</script>
</body>
 
</html>


Output:

dynamicRow

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Similar Reads

How to dynamically insert id into table element using JavaScript ?
This article explains how to dynamically insert "id" into the table element. This can be done by simply looping over the tables and adding "id"s dynamically. Below are the approaches used to dynamically insert id into table elements using JavaScript: Table of Content Using classList ObjectUsing classList MethodUsing id PropertyApproach 1: Using cla
3 min read
How to delete all table rows except first one using jQuery?
Given an HTML document containing an HTML table and the task is to delete the table row except the first one using jQuery. Approach: First, we create a table using &lt;table&gt; tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. The jQuery function removes all the rows except the first one
1 min read
How to select all even/odd rows in table using jQuery ?
In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for display from the large data set. This enables us to qui
3 min read
How to create Dynamic Drag and Drop table rows using jQuery Ajax ?
In this article, we will discuss the method of How to create Dynamic and Drop table rows using JQuery Ajax. We will use jQuery and HTML CSS to perform the operations of Drag and Drop on the table row. First to perform the operations of the Drag and Drop table row we need two jQuery libraries without these libraries we can't perform the Drag and Dro
4 min read
How to Count Number of Rows and Columns in a Table Using jQuery?
Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery. There are a few methods available in jQuery to count the number of rows and columns in an HTML table. Table of Content By iterating through the rows and columnsBy using the length propertyBy iterating through the rows and colum
3 min read
How to Add href to React-Bootstrap-Table Column Dynamically ?
In this article, we are going to learn how to add a href to the react-bootstrap table column dynamically. In this article, we will create a React Bootstrap table and an input form to add data dynamically with a href. Prerequisites: React JSReact-BootstrapSteps to Create React Application And Installing Modules:Step 1: Create your react-app by using
4 min read
How to Add an Array Dynamically to React-Bootstrap Table ?
In this article, We are going to learn how can we dynamically add an array to a react-bootstrap table. While developing the ReactJS applications, we need to do various dynamic things like entering the data in real time. Also, inserting the array data in one go. In react-bootstrap, there is a Table component that is used to display the information i
6 min read
Create a Form Dynamically using Dform and jQuery
If you have ever used Google forms, you might have wondered how does it work. How an end-user can create their form dynamically. If these questions ever came across your mind, then this article can help you. Prerequisite: Basic of HTML and CSSBasic of JQuery The plugin which we are going to use here is dform. The jQuery.dForm plugin generates HTML
3 min read
How to dynamically set the height and width of a div element using jQuery ?
Set the height of a div element using jQuery The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual height, actual height with padding, and actual heigh
7 min read
How to add CSS properties to an element dynamically using jQuery ?
In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to check the present value of the property for the s
1 min read