How to Add Edit and Delete Table Row in jQuery ?

Last Updated : 22 Jul, 2024

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.

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:

How to append a new table row in AngularJS ?

itskawal2000

Improve

Article Tags :

How to Add Edit and Delete Table Row in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?