How to Add Edit and Delete Table Row in jQuery ?

In this article, we will create an example of how to add, edit and delete table rows in jQuery. For creating this functionality we need to know about the basics of the HTML table, jQuery basic functionality. 

Table row: An HTML table is a combination of rows and columns. The table row is in the horizontal direction. In this section, we modify a table row with the help of some basic jQuery functions.

Approach:

1. An HTML table is created with Roll no, class, father's name, section, mark fields.
2. Initially, the table is empty, so the output is shown with "No student record" with an "Edit" button and the "Add new row" button.
3. On adding a new row using JavaScript, the row object is cloned after the last row.
4. Any row can be deleted which is implemented by using jQuery remove() method as shown in the code.
5. The jQuery stopPropagation() and event.stopImmediatePropagation() methods are used to stop propagation of event calling.
6. In the CSS part of the code, the table rows and button designs are handled along with the CSS fade in and fade out animations effect using @keyframes rules.

Example: Let's take an example of how to add, edit and delete table rows in jQuery.  We create an HTML table in which we can dynamically perform operations like add, edit, and delete table rows with the help of the basic jQuery function.

Output: