在本文中，我们将学习如何使用 HTML、CSS 和 javascript 执行 CRUD 操作。在各种博客上，您可以找到 javascript 中的 CRUD 操作。但是在很多文章中，我注意到他们都使用静态表在 HTML 表中使用 javascript 执行插入更新删除。
但是在这篇文章中，我将借助javascript向您解释HTML表格中的插入、更新和删除功能。
在本文中，我们将介绍以下几点
- 如何使用 javascript 在 HTML 表中动态添加数据
- 在 JavaScript 中从表中删除特定行
- 如何使用 javascript 从 HTML 表中编辑选定的行
我有表员工，其中包含员工姓名、员工地址和邮政编码列。通过单击添加按钮，我将员工添加到表中，现在我想使用 javascript 在此表上执行 crud 操作。
网页
<!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> 
JavaScript的一些基本概念
好吧，简单来说，我们可以说 JavaScript 不是主要的编程语言，而是一种脚本语言。它主要用于浏览器，仅与 HTML 或 CSS 一起使用。它有许多我们将在下一篇文章中了解的功能。
这就是为什么今天我想为什么要向您提供有关使用 JavaScript 的完整信息以及它对人们有什么好处，这样您就不会出现其他困境。然后毫不拖延地让我们开始了解 JavaScript
HTML 用于定义网页的内容。 CSS 用于指定网页的布局。
Javascript的优点
- 速度。只要需要外部资源，JavaScript 就完全不受网络调用对后端服务器的阻碍。
- 无需在客户端对其进行编译，从而获得一些速度优势。
- 简单。JavaScript 学习和实现都非常简单。
- 人气。JavaScript 用于整个网络。除此之外，互联网上也有很多资源可以学习它。StackOverflow 和 GitHub 是两个很棒的网站，您可以从中学习有关 Javascript 的所有信息。
- JavaScript 也可以在用不同语言（如 Perl 和 PHP）编写的其他脚本中使用。
- 服务器负载。由于它在客户端的使用，它在网站服务器中的需求减少了。
- 丰富的接口。拖放组件或滑块可为您的网站提供丰富的界面。
- 多功能性。现在 JavaScript 也被用于许多服务器。JavaScript在前端的客户端服务器中使用，现在仅借助JavaScript也可以从前到后创建完整的JavaScript应用程序。
Javascript的缺点
- 客户端安全。由于此代码是从用户的计算机上执行的，因此在某些情况下，它也可能被用于恶意目的。
- 浏览器支持。虽然服务器端脚本总是产生相同类型的输出，但客户端脚本的输出有点不可预测。
好吧，这不是一个大问题，因为只要它们在大型和流行的浏览器中正常工作，那么一切都是安全的。
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
