How to Add Edit and Delete Table Row in jQuery ?

23 Jun, 2022
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:
An HTML table is created with Roll no, class, father’s name, section, mark fields.Initially, the table is empty, so the output is shown with “No student record” with an “Edit” button and the “Add new row” button.On adding a new row using JavaScript, the row object is cloned after the last row.Any row can be deleted which is implemented by using jQuery remove() method as shown in the code.The jQuery stopPropagation() and event.stopImmediatePropagation() methods are used to stop propagation of event calling.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.
An HTML table is created with Roll no, class, father’s name, section, mark fields.
Initially, the table is empty, so the output is shown with “No student record” with an “Edit” button and the “Add new row” button.
On adding a new row using JavaScript, the row object is cloned after the last row.
Any row can be deleted which is implemented by using jQuery remove() method as shown in the code.
The jQuery stopPropagation() and event.stopImmediatePropagation() methods are used to stop propagation of event calling.
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.
HTML
<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">    </script>    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"        crossorigin="anonymous" />     <style>        body {            text-align: center;            color: green;        }                 .wrapper {            width: 90%;            margin: 5px auto;        }                 .common {            width: 100%;            border: none;        }                 .common thead th {            background-color: #791515;        }                 .trow:first-child {            display: none;            margin: 0 auto;        }                 .trow input {            border-radius: 5px;        }                 .controls a {            text-decoration: none;            color: #791515;        }                 .list_add {            text-decoration: none;            color: #791515;        }                 .list_add:before {            content: "\002b";            color: white;            border: 1px solid #791515;            padding: 0 5px;            border-radius: 5px;            background-color: #791515;            margin-right: 20px;        }                 .action_btn {            text-align: center;        }                 .action_btn input {            width: 120px;            padding: 5px;            border-radius: 10px;            margin: 10px;        }                 .action_btn input:first-child {            background-color: #791515;            color: white;        }                 @keyframes fadeout {            from {                bottom: 30px;                opacity: 1;            }            to {                bottom: 0;                opacity: 0;            }        }                 @keyframes fadein {            from {                bottom: 0;                opacity: 0;            }            to {                bottom: 30px;                opacity: 1;            }        }                 .fa-times {            font-size: 1rem;        }    </style></head> <body>    <h2>        How to add,edit and delete row        in Student Registration Table    </h2>     <div class="wrapper">        <table class="common">            <thead>                <tr>                    <th><i class="fas fa-times"></i></th>                    <th>Student Rollno</th>                    <th>Name</th>                    <th>Class</th>                    <th>Fathers Name</th>                    <th>Section</th>                    <th>Marks</th>                </tr>            </thead>            <tbody>                <tr class="trow">                    <td class="controls">                        <a href="#" class="list_cancel"                            title="Delete Row">                            <i class="fas fa-times"></i>                        </a>                    </td>                    <td>                        <input type="text" id="rollno"                            name="" value="" />                    </td>                    <td>                        <input type="text" class="long"                            id="name" name="" value="" />                    </td>                    <td>                        <input type="text" id="class"                            name="" value="" />                    </td>                    <td>                        <input type="text" id="father's name"                            name="" value="" />                    </td>                    <td>                        <select name="" id="" class="label">                            <option value="a">A</option>                            <option value="b">B</option>                            <option value="c">C</option>                        </select>                    </td>                    <td>                        <input type="text" class=""                            id="marks" name="" value="" />                    </td>                </tr>                 <tr class="no_entries_row">                    <td colspan="7">No Student Record</td>                </tr>            </tbody>        </table>         <a href="#" class="list_add">Add one row</a>        <br class="clear" />         <div class="action_btn">            <input name="submit" class="action_btn submit"                type="submit" value="Edit" />        </div>    </div>     <script>        function addNewRow() {            var template = $("tr.trow:first");            $(".no_entries_row").css("display", "none");            var newRow = template.clone();            var lastRow = $("tr.trow:last").after(newRow);             $(".list_cancel").on("click", function(event) {                event.stopPropagation();                event.stopImmediatePropagation();                $(this).closest("tr").remove();                if ($(".list_cancel").length === 1) {                    $(".no_entries_row")                        .css("display", "inline-block");                }                console.log($(".list_cancel").length);            });            console.log($(".list_cancel").length);            $("select.label").on("change", function(event) {                event.stopPropagation();                event.stopImmediatePropagation();                $(this).css("background-color", $(this).val());            });        }         $("a.list_add").on("click", addNewRow);    </script></body> </html>
Output:
Add Edit Delete Row
rkbhola5
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
jQuery-Events
jQuery-Questions
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.