您可以使用纯 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 应用程序
我在 <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 = [];
列表(或数据)显示在 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 调用的另一个选项。这是您可能在此应用程序中使用的示例。