如何仅使用 JavaScript 创建简单的 CRUD 应用程序
2022/1/31 11:04:59
本文主要是介绍如何仅使用 JavaScript 创建简单的 CRUD 应用程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
How to Create a Simple CRUD Application using only JavaScript
https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm
您可以使用纯 JavaScript 来创建基本的单页应用程序。今天，您可以找到许多用于构建复杂前端应用程序的综合 JavaScript 框架。我个人使用过 AngularJS，发现它非常有用。但是，出于某种原因，我仍然使用 JavaScript，并让我向您展示如何仅使用 JavaScript 创建一个简单的 CRUD 应用程序（单页应用程序）。
基本的 CRUD 操作需要数据。CRUD代表创建、读取、更新和删除，这是在数据库中操作数据的四个基本功能。它可以是任何数据库。对于我的 CRUD 应用程序，我使用 JSON 对象中的数据。
看这个演示1) 我将数据存储在 JSON 对象中（在我的应用程序中）。我将提取数据并将其显示在动态创建的 HTML 表中。
2) 每行都有一些动态创建的 HTML 元素，如按钮、文本框和下拉列表，用于执行更新、删除、保存、新建和取消等功能。
3) 按钮和文本框将动态附加事件。
这个应用程序有什么作用？
该应用程序是Books 库存。它将显示一个带有价格的不同类别的书籍列表。见上图。此应用程序允许用户查看列表、创建或添加新书到现有列表（数据库）、更新或编辑行数据以及删除数据（整行）。
每个事务都会影响一个 JSON 对象数组，一个临时数据库。
现在，让我们创建应用程序。
相关文章： 使用 Asp.Net 中的 Web API 在 Angular 6 中创建一个简单的 CRUD 应用程序
标记和 CSS 以及脚本我在 <body> 部分只有一个 DIV 元素，它将用作容器。我将使用 JavaScript 动态创建的所有其他元素都将附加到此容器。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CRUD Application using JavaScript</title>
<style>
table
{
width: 100%;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
input[type='button']
{
cursor: pointer;
border: none;
color: #FFF;
}
input[type='text'], select
{
text-align: center;
border: solid 1px #CCC;
width: auto;
padding: 2px 3px;
}
</style>
</head>
<body>
<!--Show the app here.-->
<div id="container" style="width:700px;"></div>
</body>
<script>
var crudApp = new function () {
// An array of JSON objects with values.
this.myBooks = [
{ID: '1', Book_Name: 'Computer Architecture', Category: 'Computers', Price: 125.60},
{ID: '2', Book_Name: 'Asp.Net 4 Blue Book', Category: 'Programming', Price: 56.00},
{ID: '3', Book_Name: 'Popular Science', Category: 'Science', Price: 210.40}
]
this.category = ['Business', 'Computers', 'Programming', 'Science'];
this.col = [];
this.createTable = function () {
// Extract value for table header.
for (var i = 0; i < this.myBooks.length; i++) {
for (var key in this.myBooks[i]) {
if (this.col.indexOf(key) === -1) {
this.col.push(key);
}
}
}
// CREATE A TABLE.
var table = document.createElement('table');
table.setAttribute('id', 'booksTable'); // Seet table id.
var tr = table.insertRow(-1); // Create a row (for header).
for (var h = 0; h < this.col.length; h++) {
// Add table header.
var th = document.createElement('th');
th.innerHTML = this.col[h].replace('_', ' ');
tr.appendChild(th);
}
// Add rows using JSON data.
for (var i = 0; i < this.myBooks.length; i++) {
tr = table.insertRow(-1); // Create a new row.
for (var j = 0; j < this.col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = this.myBooks[i][this.col[j]];
}
// Dynamically create and add elements to table cells with events.
this.td = document.createElement('td');
// *** CANCEL OPTION.
tr.appendChild(this.td);
var lblCancel = document.createElement('label');
lblCancel.innerHTML = '✖';
lblCancel.setAttribute('onclick', 'crudApp.Cancel(this)');
lblCancel.setAttribute('style', 'display:none;');
lblCancel.setAttribute('title', 'Cancel');
lblCancel.setAttribute('id', 'lbl' + i);
this.td.appendChild(lblCancel);
// *** SAVE.
tr.appendChild(this.td);
var btSave = document.createElement('input');
btSave.setAttribute('type', 'button'); // SET ATTRIBUTES.
btSave.setAttribute('value', 'Save');
btSave.setAttribute('id', 'Save' + i);
btSave.setAttribute('style', 'display:none;');
btSave.setAttribute('onclick', 'crudApp.Save(this)'); // ADD THE BUTTON's 'onclick' EVENT.
this.td.appendChild(btSave);
// *** UPDATE.
tr.appendChild(this.td);
var btUpdate = document.createElement('input');
btUpdate.setAttribute('type', 'button'); // SET ATTRIBUTES.
btUpdate.setAttribute('value', 'Update');
btUpdate.setAttribute('id', 'Edit' + i);
btUpdate.setAttribute('style', 'background-color:#44CCEB;');
btUpdate.setAttribute('onclick', 'crudApp.Update(this)'); // ADD THE BUTTON's 'onclick' EVENT.
this.td.appendChild(btUpdate);
// *** DELETE.
this.td = document.createElement('th');
tr.appendChild(this.td);
var btDelete = document.createElement('input');
btDelete.setAttribute('type', 'button'); // SET INPUT ATTRIBUTE.
btDelete.setAttribute('value', 'Delete');
btDelete.setAttribute('style', 'background-color:#ED5650;');
btDelete.setAttribute('onclick', 'crudApp.Delete(this)'); // ADD THE BUTTON's 'onclick' EVENT.
this.td.appendChild(btDelete);
}
// ADD A ROW AT THE END WITH BLANK TEXTBOXES AND A DROPDOWN LIST (FOR NEW ENTRY).
tr = table.insertRow(-1); // CREATE THE LAST ROW.
for (var j = 0; j < this.col.length; j++) {
var newCell = tr.insertCell(-1);
if (j >= 1) {
if (j == 2) { // WE'LL ADD A DROPDOWN LIST AT THE SECOND COLUMN (FOR Category).
var select = document.createElement('select'); // CREATE AND ADD A DROPDOWN LIST.
select.innerHTML = '<option value=""></option>';
for (k = 0; k < this.category.length; k++) {
select.innerHTML = select.innerHTML +
'<option value="' + this.category[k] + '">' + this.category[k] + '</option>';
}
newCell.appendChild(select);
} else {
var tBox = document.createElement('input'); // CREATE AND ADD A TEXTBOX.
tBox.setAttribute('type', 'text');
tBox.setAttribute('value', '');
newCell.appendChild(tBox);
}
}
}
this.td = document.createElement('td');
tr.appendChild(this.td);
var btNew = document.createElement('input');
btNew.setAttribute('type', 'button'); // SET ATTRIBUTES.
btNew.setAttribute('value', 'Create');
btNew.setAttribute('id', 'New' + i);
btNew.setAttribute('style', 'background-color:#207DD1;');
btNew.setAttribute('onclick', 'crudApp.CreateNew(this)'); // ADD THE BUTTON's 'onclick' EVENT.
this.td.appendChild(btNew);
var div = document.getElementById('container');
div.innerHTML = '';
div.appendChild(table); // ADD THE TABLE TO THE WEB PAGE.
};
// ****** OPERATIONS START.
// CANCEL.
this.Cancel = function (oButton) {
// HIDE THIS BUTTON.
oButton.setAttribute('style', 'display:none; float:none;');
var activeRow = oButton.parentNode.parentNode.rowIndex;
// HIDE THE SAVE BUTTON.
var btSave = document.getElementById('Save' + (activeRow - 1));
btSave.setAttribute('style', 'display:none;');
// SHOW THE UPDATE BUTTON AGAIN.
var btUpdate = document.getElementById('Edit' + (activeRow - 1));
btUpdate.setAttribute('style', 'display:block; margin:0 auto; background-color:#44CCEB;');
var tab = document.getElementById('booksTable').rows[activeRow];
for (i = 0; i < this.col.length; i++) {
var td = tab.getElementsByTagName("td")[i];
td.innerHTML = this.myBooks[(activeRow - 1)][this.col[i]];
}
}
// EDIT DATA.
this.Update = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
var tab = document.getElementById('booksTable').rows[activeRow];
// SHOW A DROPDOWN LIST WITH A LIST OF CATEGORIES.
for (i = 1; i < 4; i++) {
if (i == 2) {
var td = tab.getElementsByTagName("td")[i];
var ele = document.createElement('select'); // DROPDOWN LIST.
ele.innerHTML = '<option value="' + td.innerText + '">' + td.innerText + '</option>';
for (k = 0; k < this.category.length; k++) {
ele.innerHTML = ele.innerHTML +
'<option value="' + this.category[k] + '">' + this.category[k] + '</option>';
}
td.innerText = '';
td.appendChild(ele);
} else {
var td = tab.getElementsByTagName("td")[i];
var ele = document.createElement('input'); // TEXTBOX.
ele.setAttribute('type', 'text');
ele.setAttribute('value', td.innerText);
td.innerText = '';
td.appendChild(ele);
}
}
var lblCancel = document.getElementById('lbl' + (activeRow - 1));
lblCancel.setAttribute('style', 'cursor:pointer; display:block; width:20px; float:left; position: absolute;');
var btSave = document.getElementById('Save' + (activeRow - 1));
btSave.setAttribute('style', 'display:block; margin-left:30px; float:left; background-color:#2DBF64;');
// HIDE THIS BUTTON.
oButton.setAttribute('style', 'display:none;');
};
// DELETE DATA.
this.Delete = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
this.myBooks.splice((activeRow - 1), 1); // DELETE THE ACTIVE ROW.
this.createTable(); // REFRESH THE TABLE.
};
// SAVE DATA.
this.Save = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
var tab = document.getElementById('booksTable').rows[activeRow];
// UPDATE myBooks ARRAY WITH VALUES.
for (i = 1; i < this.col.length; i++) {
var td = tab.getElementsByTagName("td")[i];
if (td.childNodes[0].getAttribute('type') == 'text' || td.childNodes[0].tagName == 'SELECT') { // CHECK IF ELEMENT IS A TEXTBOX OR SELECT.
this.myBooks[(activeRow - 1)][this.col[i]] = td.childNodes[0].value; // SAVE THE VALUE.
}
}
this.createTable(); // REFRESH THE TABLE.
}
// CREATE NEW.
this.CreateNew = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
var tab = document.getElementById('booksTable').rows[activeRow];
var obj = {};
// ADD NEW VALUE TO myBooks ARRAY.
for (i = 1; i < this.col.length; i++) {
var td = tab.getElementsByTagName("td")[i];
if (td.childNodes[0].getAttribute('type') == 'text' || td.childNodes[0].tagName == 'SELECT') { // CHECK IF ELEMENT IS A TEXTBOX OR SELECT.
var txtVal = td.childNodes[0].value;
if (txtVal != '') {
obj[this.col[i]] = txtVal.trim();
} else {
obj = '';
alert('all fields are compulsory');
break;
}
}
}
obj[this.col[0]] = this.myBooks.length + 1; // NEW ID.
if (Object.keys(obj).length > 0) { // CHECK IF OBJECT IS NOT EMPTY.
this.myBooks.push(obj); // PUSH (ADD) DATA TO THE JSON ARRAY.
this.createTable(); // REFRESH THE TABLE.
}
}
// ****** OPERATIONS END.
}
crudApp.createTable();
</script>
</html>
试试看
我有一个名为crudApp()的全局函数，它还有其他函数可以让 CRUD 操作工作。
首先，我在 myBooks 中声明了一个带有值的 JSON 对象数组。这是我的数据，我将使用它。
这.myBooks = [];
我有另一个名为category的JSON 对象数组。我将使用类别对象来填充 SELECT 下拉列表，并将其添加到表的每一行中。列表（或数据）显示在 HTML 表格中。由于我没有在设计模式中包含表格元素，我将使用 JSON 数据动态创建表格。为此，我声明了一个名为createTable()的函数。
this.createTable = 函数 () { }
动态创建 HTML 表格
1) for 循环从数组myBooks中提取表头 的值，并将其存储在另一个名为col[]的数组中。我在这个应用程序的许多函数中都使用了这个数组。
2） 在创建表格时，我正在向表格的每一行动态添加（或附加）一些元素。
第一个元素是显示✖ (lblCancel.innerHTML = '✖') 符号的标签。这个标签的功能就像一个按钮，用来取消。单击该元素将取消更新功能。因此，它附加了onclick事件，该事件调用了一个名为Cancel()的函数。
lblCancel.setAttribute('onclick', 'crudApp.Cancel(this)');
同样，我正在创建并添加三个带有事件和 id 的按钮（按钮类型的输入元素）。每个都有保存、更新和删除的功能。
您可以使用setAttribute()方法添加其他功能。
3) 最后，我通过在表格末尾添加一行来完成表格创建部分，该行将有两个空白文本框和一个SELECT下拉列表，最后一列有一个按钮（创建）。这是为列表创建新数据。
CRUD 操作的函数
我有五个不同的功能来执行不同的操作。这些功能是
1) this.Cancel()——这将取消更新程序。表格的每一行都有一个更新按钮。单击此按钮将显示另外两个按钮，取消和保存。单击取消按钮将调用函数this.cancel() ，该函数将参数作为调用元素。
使用对象的引用，您可以获得活动行、其元素和值。
2) this.Update() – 当你点击任何一行的更新按钮 时这个函数被调用。它只显示输入元素，如文本框和带有值的下拉列表。所以现在，您可以编辑所选行的每个单元格中的值（第一列除外）。
此外，它将显示✖按钮（取消）和保存按钮。看图片。
3) this.Delete() - 此函数使用JavaScript splice() 方法从 JSON 数组中删除数据。
this.myBooks.splice((activeRow - 1), 1);
splice()通常采用三个参数，解释如下。我提供了两个。第一个参数是数组中的位置（这就是我使用 activeRow - 1 的原因），我想删除它。第二个参数是我想从数组中删除的项目数（我有1 ）。添加值2看看会发生什么。
4) this.Save() - 此函数将更新或保存数组中的行数据。它与更新操作相关联。当用户单击任意行中的“更新”按钮时， “保存”选项被激活。
5) this.Create() – 最后一行有空白框，最后一列有一个名为Create的按钮。单击Create按钮将调用此函数，并将在myBooks数组内的现有列表中添加一组新数据。
看这个演示它是一个非常基本的应用程序。您可以添加更多功能。分享这个示例的目的是展示在不使用任何 JS 框架的情况下，您可以多么轻松地仅使用 JavaScript 创建一个基本的 CRUD 应用程序。
我在这个应用程序中使用的数据是一个 JSON 数组，一个临时数据源。您可以使用更动态的数据库，例如 SQL Server，并使用 Web API 方法来操作数据。
Ajax XMLHttpRequest对象是在 JavaScript 中进行 API 调用的另一个选项。这是您可能在此应用程序中使用的示例。
这篇关于如何仅使用 JavaScript 创建简单的 CRUD 应用程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16使用vue3+springboot构建简单Web应用教程
- 2024-11-15全栈开发项目实战：从入门到初级项目的实现
- 2024-11-15数据库项目实战：从入门到初级应用教程
- 2024-11-15IDEA项目实战入门教程
- 2024-11-15IT编程项目实战：新手入门的全面指南
- 2024-11-15Java开发项目实战：新手入门与初级技巧
- 2024-11-15Java零基础项目实战：从入门到独立开发
- 2024-11-15MyBatis Plus教程：入门与基础操作详解
- 2024-11-15MyBatis-Plus教程：新手入门与实战技巧
- 2024-11-15MyBatis教程：从入门到实践
