JavaScript CRUD 示例

柔光的暖阳◎ 2023-09-28 08:13 36阅读 0赞

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">
            
        </head>
        <body>
            <div class="container">
                
                <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>
                
                <div class="row">
                    <div class="col-md-12">
                        <h4>PRODUCT LIST</h4>
                    </div>
                    <div id="prodItemList">
                        
                    </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;
    }

![ee76fc53eb224a7fb8a42b8a2b0b0a2c.png][]

[ee76fc53eb224a7fb8a42b8a2b0b0a2c.png]: https://img-blog.csdnimg.cn/ee76fc53eb224a7fb8a42b8a2b0b0a2c.png