Membuat fitur crud mengunakan javascript

Ok langsung saja kita akan mulai membuat fitur CRUD mengunakan javascript untuk tampilan disini saya akan mengunakan bootstarp 

https://getbootstrap.com/

ok langsung kita buat tampilan halaman utama fitur CRUD seperti di bawah ini, Script ini akan menggunakan fungsi CRUD ke array ketika tombol diklik

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://kura-kuracoding.blogspot.com">Kurakuracoding</a>
        </div>
    </nav>
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <h3 class="text-primary">Create, Read, Update, Delete (CRUD) Using JavaScript Source Code</h3>
        <hr style="border-top:1px dotted #ccc;" />
        <div class="col-md-8">
            <table class="table table-bordered">
                <thead class="alert-info">
                    <tr>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="result"></tbody>
            </table>
        </div>

        <div class="col-md-4">
            <div id="create">
                <form action="javascript:void(0);" method="POST" class="form-group" onsubmit="Create()">
                    <label>Full Name:</label>
                    <input type="text" id="name" class="form-control" />
                    <br />
                    <center><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>
                            Create</button></center>
                </form>
            </div>
            <div id="edit">
                <form action="javascript:void(0);" method="POST" class="form-group" id="update">
                    <label>Full Name:</label>
                    <input type="text" id="update_name" class="form-control" />
                    <br />
                    <center><button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span>
                            Update</button> <button class="btn btn-danger" onclick="editHider()">&#10006; Close</button>
                    </center>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="js/script.js"></script>

</html>


Selanjutnya kita akan buat fungsi dari CRUD mengunakan javascript untuk script buat seperti di bawah ini

var el = document.getElementById('result');
var names = [];

function Create() {
    var el = document.getElementById('name')
    var name = el.value;
    if (name) {
        names.push(name.trim());
        el.value = '';
        displayData();
    }
    displayData();
};

function Delete(item) {
    names.splice(item, 1);
    displayData();
   
};

function Edit(item) {
    var el = document.getElementById('update_name');
    el.value = names[item];
    document.getElementById('edit').style.display = 'inline';
    document.getElementById('create').style.display = 'none';
    self = this;
   
    document.getElementById('update').onsubmit = function() {
    var name = el.value;
        if (name) {
            self.names.splice(item, 1, name.trim());
            self.displayData();
            buttonToggle();
            document.getElementById('create').style.display = 'inline';
        }
    }
};


function buttonToggle() {
    document.getElementById('edit').style.display = 'none';
    document.getElementById('create').style.display = 'inline';
}


function displayData() {
    var data = '';
    if (names.length > 0) {
        for (i = 0; i < names.length; i++) {
            data += '<tr>';
            data += '<td>' + names[i] + '</td>';
            data += '<td colspan="2"><center><button class="btn btn-warning" onclick="Edit(' + i + ')"><span class="glyphicon glyphicon-edit"></span> Edit</button> | <button class="btn btn-danger" onclick="Delete(' + i + ')"><span class="glyphicon glyphicon-trash"></span> Delete</button></center></td>';
            data += '</tr>';
        }
    }
   
    el.innerHTML = data;
};


displayData();
buttonToggle();