How to Add Edit and Delete Table Row in jQuery ?

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 Add Edit and Delete Table Row in jQuery ?

I

itskawal2000

Improve

Article Tags :

Similar Reads

JavaScript - How to Add, Edit and Delete Data in HTML Table?

To add edit and delete features in an HTML table with JavaScript, create buttons for each action. Use JavaScript functions to add new rows, edit existing data, and remove rows as needed.Approach to Add Edit and Delete DataThe addData() method obtains the data from the input fields and creates a fres

How to add table row in a table using jQuery?

In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table

How to Delete All Table Rows Except First One using jQuery?

To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th

How to append a new table row in AngularJS ?

In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the <tr> elemen

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 leng