如何仅使用 JavaScript 创建简单的 CRUD 应用程序

╰+哭是因爲堅強的太久メ 2023-10-01 17:01 12阅读 0赞

[How to Create a Simple CRUD Application using only JavaScript![icon-default.png_t_M0H8][]https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm][How to Create a Simple CRUD Application using only JavaScript_icon-default.png_t_M0H8_https_www.encodedna.com_javascript_how-to-create-a-simple-crud-application-using-only-javascript.htm]

您可以使用纯 JavaScript 来创建基本的单页应用程序。今天，您可以找到许多用于构建复杂前端应用程序的综合 JavaScript 框架。我个人使用过 AngularJS，发现它非常有用。但是，出于某种原因，我仍然使用 JavaScript，并让我向您展示如何仅使用 JavaScript 创建一个简单的 CRUD 应用程序（单页应用程序）。

![b68a7d6b0b6620076ff6732efa7666dc.png][]

基本的 CRUD 操作需要数据。**CRUD**代表创建、读取、更新和删除，这是在数据库中操作数据的四个基本功能。它可以是任何数据库。对于我的 CRUD 应用程序，我使用 JSON 对象中的数据。

看这个演示

**1)** 我将数据存储在 JSON 对象中（在我的应用程序中）。我将提取数据并将其显示在[动态创建的 HTML 表中][HTML]。

**2)** 每行都有一些[动态创建的 HTML 元素][HTML 1]，如按钮、文本框和下拉列表，用于执行更新、删除、保存、新建和取消等功能。

**3)** 按钮和文本框将动态附加事件。

### **这个应用程序有什么作用？** ###

该应用程序是Books 库存。它将显示一个带有价格的不同类别的书籍列表。见上图。此应用程序允许用户查看列表、创建或添加新书到现有列表（数据库）、更新或编辑行数据以及删除数据（整行）。

每个事务都会影响一个 JSON 对象数组，一个临时数据库。

现在，让我们创建应用程序。

**相关文章：** [使用 Asp.Net 中的 Web API 在 Angular 6 中创建一个简单的 CRUD 应用程序][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>
            
            <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 数据动态创建表格][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() – 当你点击任何一行的更新按钮 时这个函数被调用。它只显示输入元素，如文本框和带有值的下拉列表。所以现在，您可以编辑所选行的每个单元格中的值（第一列除外）。

此外，它将显示✖按钮（取消）和保存按钮。看图片。

![be1ac2215d916dc2a20241dd08d2ecc5.png][]

**3)** this.Delete() - 此函数使用[JavaScript splice() 方法][JavaScript splice_]从 JSON 数组中删除数据。

this.myBooks.splice((activeRow - 1), 1);

splice()通常采用三个参数，解释[如下][Link 1]。我提供了两个。第一个参数是数组中的位置（这就是我使用 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 调用的另一个选项。这是您可能在此应用程序中使用[的示例。][Link 2]

[icon-default.png_t_M0H8]: https://csdnimg.cn/release/blog_editor_html/release1.9.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M0H8
[How to Create a Simple CRUD Application using only JavaScript_icon-default.png_t_M0H8_https_www.encodedna.com_javascript_how-to-create-a-simple-crud-application-using-only-javascript.htm]: https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm
[b68a7d6b0b6620076ff6732efa7666dc.png]: https://img-blog.csdnimg.cn/img_convert/b68a7d6b0b6620076ff6732efa7666dc.png
[HTML]: https://www.encodedna.com/javascript/dynamically-add-remove-rows-to-html-table-using-javascript-and-save-data.htm
[HTML 1]: https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm
[Asp.Net _ Web API _ Angular 6 _ CRUD]: https://www.encodedna.com/angular/crud-application-in-angular-6-with-web-api-in-mvc-4.htm
[JSON]: https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm
[be1ac2215d916dc2a20241dd08d2ecc5.png]: https://img-blog.csdnimg.cn/img_convert/be1ac2215d916dc2a20241dd08d2ecc5.png
[JavaScript splice_]: https://www.encodedna.com/angularjs/tutorial/how-to-push-new-elements-in-between-existing-ng-repeat-array.htm
[Link 1]: https://www.encodedna.com/angularjs/tutorial/how-to-push-new-elements-in-between-existing-ng-repeat-array.htm#splice
[Link 2]: https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm