JavaScript CRUD 示例

最新推荐文章于 2024-09-24 13:16:24 发布

原创最新推荐文章于 2024-09-24 13:16:24 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了一个简单的 JavaScript CRUD 应用程序实现，通过 HTML 和 JavaScript 构建了一个可以添加、编辑、更新和删除产品的交互式界面。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>javascript CRUD application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="main.css">
        <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
    </head>
    <body>
        <div class="container">
            <!-- inserting product -->
            <div class="row add-prod">
                <div class="col-md-12">
                    <h4 class="jsTitle">Javascript CRUD Application</h4>
                    <h4>ADD PRODUCT</h4>
                </div>
                <div class="col-md-10">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" id="insProduct" name='name' placeholder="write product name">
                        </div>
                    </form>
                </div>
                <div class="col-md-2 col-xs-12">
                    <button type="button" class="btn btn-primary" id="addProduct" onclick="addprod();">ADD PRODUCT</button>
                </div>
            </div>
            <!-- listing product -->
            <div class="row">
                <div class="col-md-12">
                    <h4>PRODUCT LIST</h4>
                </div>
                <div id="prodItemList">
                    <!-- <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" disabled class="form-control list-prod" id="prodName"  placeholder="write product name">
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-4">
                            <button type="button" class="btn btn-success list-prod" onclick="edit();" id="edit">EDIT</button>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-4">
                            <button type="button" class="btn btn-success list-prod" onclick="update();" id="update">UPDATE</button>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-4">
                            <button type="button" class="btn btn-danger list-prod" onclick="deletedata();" id="delete">DELETE</button>
                    </div> -->
                </div>
            </div>
        </div>

        <script src="main.js"></script>

    </body>
</html>

main.js

//add data function
var product = document.getElementById("insProduct");
var prodItemList = document.getElementById("prodItemList");
var counter = 0;

function addprod() {
    var proval = product.value;
    var values = '"' + proval + '"';

    if (values == '""') {
        alert("please enter the data!");
    } else
    {
        // for(i = 0; i < 35; i++) {
// $(document).ready(function(){
//     $('body').append('<div id="div'+ (i++) +'" />');
// });


        var html = '<div class="data' + counter + '">' +
                '<div class="col-md-6" style="overflow:auto;">' +
                '<input type="text" disabled class="form-control list-prod" value=' + values + ' class="prodName" placeholder="write product name">' +
                '</div>' +
                '<div class="col-md-2 col-sm-4 col-xs-4">' +
                '<button type="button" class="btn btn-success list-prod" onclick="edit(this.id);" id="edit' + counter + '">EDIT</button>' +
                '</div>' +
                '<div class="col-md-2 col-sm-4 col-xs-4">' +
                '<button type="button" class="btn btn-success list-prod" id="update' + counter + '" onclick="update(this.id);">UPDATE</button>' +
                '</div>' +
                '<div class="col-md-2 col-sm-4 col-xs-4">' +
                '<button type="button" class="btn btn-danger list-prod" id="delete' + counter + '" onclick="deleteProd(this.id);" >DELETE</button>' +
                '</div>' +
                '</div>';

        counter++;
        prodItemList.insertAdjacentHTML('beforeend', html);
    }
}
//update data function
function update(updateDate) {
    var parent = document.getElementById(updateDate).parentNode;
    var nextParent = parent.parentNode;
    var inputNode = nextParent.firstChild.firstChild;
    inputNode.setAttribute("disabled", "disabled");

}
//edit data function
function edit(prodName) {
    // console.log(prodName);
    var parent = document.getElementById(prodName).parentNode;
    var nextParent = parent.parentNode;
    var inputNode = nextParent.firstChild.firstChild;
    inputNode.removeAttribute("disabled");
}
// delete the data
function deleteProd(deletedata) {
    var parent = document.getElementById(deletedata).parentNode;
    var nextParent = parent.parentNode;
    nextParent.remove();
}

main.css

body{
    font-family: monospace;
}
.container{
    margin-top:50px;
}

.btn{
    width: 100%;
}
.btn, .form-control{
    border-radius: 0px;
}

.add-prod{
    margin-bottom:50px;
}

h4{
    color:#337ab7;
}
.list-prod{
    margin-bottom:10px;
    cursor:default !important;
}
h4.jsTitle{
    background: #337ab7;
    color: #fff;
    padding: 20px 10px;
    margin-bottom:50px;
    text-transform:uppercase;
    letter-spacing: 1px;
}
.prodItemList{
    overflow: auto;
}