Add edit and delete data in an HTML table using JavaScript

In this article, we will learn how to perform CRUD operations using HTML, CSS, and javascript. On various blogs, you can find CRUD operations in javascript. But on many articles, I have noticed they are all using the static table to perform the insert update delete in HTML table using javascript.

But in this post, I will explain to you the insert, update, and delete function in the HTML table with the help of javascript.

In this article, We will cover the below points in the

How to add data in HTML table dynamically using javascript
Delete a particular row from a table in JavaScript
How to edit selected row from HTML table using javascript

I have table Employees with column Employee Name, Employee Address, and PostalCode. With the click of add button, I’m adding the employee to the table and Now I want to perform a crud operation on this table using the javascript.

How to delete a particular row from a table in JavaScript

Html Page

<!DOCTYPE html>
<html>
<head>
    <title> Use of JQuery to Add Edit Delete Table Row </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <div class="container">
        <h1> How to delete a particular row from a table in JavaScript </h1>
        <form id="addcustomerform">
            <div class="form-group">
                <label>Employee Name:</label>
                <input type="text" name="txtEmployeeName" id="txtEmployeeName" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>Employee Address:</label>
                <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
            </div>
            <div class="form-group">
                <label>PostalCode:</label>
                <input type="text" name="txtPostalCode" id="txtPostalCode" class="form-control" value="" required="">
            </div>
            <button type="submit" id="btnaddEmployee" class="btn btn-primary save-btn">add Customer</button>

        </form>
        <br />
        <fieldset>
            <legend>Employee List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>EmployeeId</th>
                        <th>EmployeeName</th>
                        <th>Address</th>
                        <th>PostalCode</th>
                    </tr>
                </thead>
                <tbody id="tblbody">

                </tbody>
            </table>
        </fieldset>
    </div>
</body>
</html>

Javascript Code

<script type="text/javascript">
        function CreateUniqueEmployeeID()
        {
            const ID = Date.now();
            return ID;
        }
        document.getElementById("btnaddEmployee").addEventListener("click", function (event) {
            event.preventDefault()
            var EmployeeID = CreateUniqueEmployeeID();
            var EmployeeName = document.getElementById("txtEmployeeName").value;
            var Address = document.getElementById("txtAddress").value;
            var PostalCode = document.getElementById("txtPostalCode").value;
            var btneditId = "btnedit" + EmployeeID;
            var btndeleteId = "btndelete" + EmployeeID;
            var tablerow = "<tr Id='" + EmployeeID + "'   data-EmployeeID='" + EmployeeID + "'   data-EmployeeName='" + EmployeeName + "' data-Address='" + Address + "'   data-PostalCode='" + PostalCode + "'>"

                          + "<td class='td-data'>" + EmployeeID + "</td>"
                          + "<td class='td-data'>" + EmployeeName + "</td>"
                          + "<td class='td-data'>" + Address + "</td>"
                          + "<td class='td-data'>" + PostalCode + "</td>"
                          + "<td class='td-data'>" +
                          "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showeditrow(" + EmployeeID + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                          "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteEmployee' onclick='deleteEmployeeRow(" + EmployeeID + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                          + "</td>"
                          + "</tr>";
            debugger;
            document.getElementById('tblbody').innerHTML += tablerow;
            document.getElementById('txtEmployeeName').value = "";
            document.getElementById('txtAddress').value = "";
            document.getElementById('txtPostalCode').value = "";
        });

        function showeditrow(EmployeeID)
        {
            debugger;
            var EmployeeRow = document.getElementById(EmployeeID); //this gives tr of  whose button was clicked

            var data = EmployeeRow.querySelectorAll(".td-data");

            /*returns array of all elements with
            "row-data" class within the row with given id*/

            var EmployeeID = data[0].innerHTML;
            var EmployeeName = data[1].innerHTML;
            var Address = data[2].innerHTML;
            var PostalCode = data[3].innerHTML;
            var btneditId = "btnedit" + EmployeeID;
            data[0].innerHTML = '<input name="txtupdate_EmployeeID"  disabled id="txtupdate_EmployeeID" value="' + EmployeeID + '"/>';
            data[1].innerHTML='<input name="txtupdate_EmployeeName" id="txtupdate_EmployeeName" value="' + EmployeeName + '"/>';
            data[2].innerHTML='<input name="txtupdate_Address" id="txtupdate_Address" value="' + Address + '"/>';
            data[3].innerHTML='<input name="txtupdate_PostalCode" id="txtupdate_PostalCode" value="' + PostalCode + '"/>';

            data[4].innerHTML =
                "<button class='btn btn-primary btn-xs btn-updateEmployee' onclick='updateemployees(" + EmployeeID + ")'>" +
                "<i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
                + "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancelupdate(" + EmployeeID + ")'><i class='fa fa-times' aria-hidden='true'></i>Cancel</button>"
                + "<button class='btn btn-danger btn-xs btn-deleteEmployee' onclick='deleteEmployeeRow(" + EmployeeID + ")'>"
                + "<i class='fa fa-trash' aria-hidden='true'></i>Delete</button>"
        }
        function cancelupdate(EmployeeID)
        {
            debugger;
            var btneditId = "btnedit" + EmployeeID;
            var btndeleteId = "btndelete" + EmployeeID;

            var EmployeeRow = document.getElementById(EmployeeID); //this gives tr of  whose button was clicked
            var data = EmployeeRow.querySelectorAll(".td-data");

            var EmployeeName = EmployeeRow.getAttribute("data-EmployeeName");
            var Address = EmployeeRow.getAttribute("data-Address");
            var PostalCode = EmployeeRow.getAttribute("data-PostalCode");


            data[0].innerHTML = EmployeeID;
            data[1].innerHTML = EmployeeName;
            data[2].innerHTML = Address;
            data[3].innerHTML = PostalCode;

            var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showeditrow(" + EmployeeID + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                          "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteEmployee' onclick='deleteEmployeeRow(" + EmployeeID + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
            data[4].innerHTML = actionbtn;
        }
        function deleteEmployeeRow(EmployeeID)
        {
            document.getElementById(EmployeeID).remove();
        }
        function updateemployees(EmployeeID)
        {
            var btneditId = "btnedit" + EmployeeID;
            var btndeleteId = "btndelete" + EmployeeID;

            var EmployeeRow = document.getElementById(EmployeeID); //this gives tr of  whose button was clicked
            var data = EmployeeRow.querySelectorAll(".td-data");

            var EmployeeName = data[1].querySelector("#txtupdate_EmployeeName").value;
            var Address = data[2].querySelector("#txtupdate_Address").value;
            var PostalCode = data[3].querySelector("#txtupdate_PostalCode").value;


            data[0].innerHTML = EmployeeID;
            data[1].innerHTML = EmployeeName;
            data[2].innerHTML = Address;
            data[3].innerHTML = PostalCode;

            var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showeditrow(" + EmployeeID + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                          "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteEmployee' onclick='deleteEmployeeRow(" + EmployeeID + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
            data[4].innerHTML = actionbtn;
        }
    </script>

How to add data in HTML table dynamically using javascript

*If you have any query please comment, we will reply to your query.

Some basic concept of JavaScript

Well, to understand it in simple words, we can say that JavaScript is not the main programming language but it is a scripting language. It is mainly used in browsers and it is used with HTML or CSS only. It has many features which we will know in the next article.

That’s why today I thought that why should you be given complete information about the use of JavaScript and what are its advantages to the people so that no other dilemma will arise in your mind. Then without delay let’s start and know about JavaScript

HTML It is used to define the content of web pages.CSS It is used to specify the layout of web pages.

Advantages of Javascript

Speed. As long as external resources are needed, JavaScript is completely unhindered from network calls to a backend server.
There is no need for it to be compiled on the client-side so that it gets some speed advantages.
Simplicity. JavaScript is very simple to learn as well as to implement.
Popularity. JavaScript is used throughout the web. Along with this, there are many resources on the internet to learn it as well. StackOverflow and GitHub are two great websites from where you can learn everything about Javascript.
JavaScript can also be used within other scripts that have been written in different languages such as Perl and PHP.
Server Load. Due to its use on the client-side, its demand in the website server decreases.
Rich interfaces. Having drag, or drop components or sliders, provides a rich interface to your website.
Versatility. Now JavaScript is also being used in many servers. JavaScript is used in the client’s server in the front-end, as well as now a complete JavaScript app can also be created from front to back with the help of JavaScript only.

Disadvantages of Javascript

Client-Side Security. Since this code is executed from the computer of the users, so in some cases it can also be exploited for malicious purposes.
Browser Support. While server-side scripts always produce the same type of output, the output of client-side scripts is a bit unpredictable.

Well, this is not a big problem because as long as they are working properly in big and popular browsers, then everything is safe.

The post Add edit and delete data in an HTML table using JavaScript appeared first on Software Development | Programming Tutorials.

Ashok Patel

I'm a software engineer, having good experience in software programming web designing with great command on ASP.NET, React JS, Angular JS,.NET Core HTML5, JavaScript, T-SQL, JQuery. Also have great experience in Electronics and electrical engineers design.

Add edit and delete data in an HTML table using JavaScript

In this article, We will cover the below points in the

Html Page

Javascript Code

Read More Articles

Ashok Patel