javascript实现HTML表格的插入、更新和删除功能

╰半橙微兮° 2023-09-30 12:05 9阅读 0赞

在本文中，我们将学习如何***使用 HTML、CSS 和 javascript 执行 CRUD 操作***。在各种博客上，您可以找到 javascript 中的 CRUD 操作。但是在很多文章中，我注意到他们都使用静态表***在 HTML 表中使用 javascript 执行插入更新删除***。

但是在这篇文章中，我将借助javascript向您解释HTML表格中的插入、更新和删除功能。

#### **在本文中，我们将介绍以下几点** ####

*  如何使用 javascript 在 HTML 表中动态添加数据
 *  在 JavaScript 中从表中删除特定行
 *  如何使用 javascript 从 HTML 表中编辑选定的行

我有表员工，其中包含员工姓名、员工地址和邮政编码列。通过单击添加按钮，我将员工添加到表中，现在我想使用 javascript 在此表上执行 crud 操作。

![d4e6b071785e4ae05989cd265090d477.png][]

#### **网页** ####

<!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>
    <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>
    </body>
    </html>

![5730a06e46236286ca76230142edf807.png][]

**JavaScript的一些基本概念**

好吧，简单来说，我们可以说 JavaScript 不是主要的编程语言，而是一种脚本语言。它主要用于浏览器，仅与 HTML 或 CSS 一起使用。它有许多我们将在下一篇文章中了解的功能。

这就是为什么今天我想为什么要向您提供有关使用 JavaScript 的完整信息以及它对人们有什么好处，这样您就不会出现其他困境。然后毫不拖延地让我们开始了解 JavaScript

HTML 用于定义网页的内容。 CSS 用于指定网页的布局。

**Javascript的优点**

*  速度。只要需要外部资源，JavaScript 就完全不受网络调用对后端服务器的阻碍。
 *  无需在客户端对其进行编译，从而获得一些速度优势。
 *  简单。JavaScript 学习和实现都非常简单。
 *  人气。JavaScript 用于整个网络。除此之外，互联网上也有很多资源可以学习它。StackOverflow 和 GitHub 是两个很棒的网站，您可以从中学习有关 Javascript 的所有信息。
 *  JavaScript 也可以在用不同语言（如 Perl 和 PHP）编写的其他脚本中使用。
 *  服务器负载。由于它在客户端的使用，它在网站服务器中的需求减少了。
 *  丰富的接口。拖放组件或滑块可为您的网站提供丰富的界面。
 *  多功能性。现在 JavaScript 也被用于许多服务器。JavaScript在前端的客户端服务器中使用，现在仅借助JavaScript也可以从前到后创建完整的JavaScript应用程序。

Javascript的缺点

*  客户端安全。由于此代码是从用户的计算机上执行的，因此在某些情况下，它也可能被用于恶意目的。
 *  浏览器支持。虽然服务器端脚本总是产生相同类型的输出，但客户端脚本的输出有点不可预测。

好吧，这不是一个大问题，因为只要它们在大型和流行的浏览器中正常工作，那么一切都是安全的。

[d4e6b071785e4ae05989cd265090d477.png]: https://img-blog.csdnimg.cn/img_convert/d4e6b071785e4ae05989cd265090d477.png
[5730a06e46236286ca76230142edf807.png]: https://img-blog.csdnimg.cn/img_convert/5730a06e46236286ca76230142edf807.png