"Javascript CRUD App "
Bootstrap 3.0.0 Snippet by vmurali100

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>CRUD - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <div class="container"> <div class="row"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <!-- FORM --> <div class="col-md-12"> <form class="form-horizontal" id="form-edit-client"> <fieldset> <!-- Form Name --> <legend>Client</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="client-name">Name</label> <div class="col-md-4"> <input id="client-name" name="client-name" type="text" placeholder="your client's name" class="form-control input-md"> <span class="help-block">Full name of your customer</span> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="client-email">Email</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">@</span> <input id="client-email" name="client-email" class="form-control" placeholder="yourname@yourdomain.com" type="text"> </div> <p class="help-block">Email of your client</p> </div> </div> <!-- Button --> </fieldset> </form> <div class="form-group"> <label class="col-md-4 control-label" for="btn-save"></label> <div class="col-md-4" id="saveupdate"> <button id="btn-save" name="btn-save" class="btn btn-success" onclick="addClient()">Save</button> </div> </div> </div> <!-- LIST --> <div class=col-md-12> <legend>List of clients</legend> <table class="table table-bordered table-condensed table-hover"> <thead> <tr> <td>Name</td> <th>Email</th> <th>Actions</th> </tr> </thead> <tbody id="form-list-client-body"> </tbody> </table> </div> <br>  <!-- view --> </div> </div> <script type="text/javascript"> </script> </body> </html>
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; margin-left: 10px; }
var clients=[]; var myIndex; function addClient(){ var newClient={ name:document.getElementById("client-name").value, email:document.getElementById("client-email").value } clients.push(newClient) displayClients() } function displayClients(){ document.getElementById("form-list-client-body").innerHTML="" for (i=0;i<clients.length;i++){ var myTr=document.createElement("tr") for(a in clients[i]){ var mytd=document.createElement("td") mytd.innerHTML=clients[i][a] myTr.appendChild(mytd) } var actionTd=document.createElement("td") var editBtn=document.createElement("button") editBtn.innerHTML="Edit" editBtn.setAttribute("class" , "btn btn-sm btn-primary") editBtn.setAttribute("onclick" , "editClient("+i+")") var deletebtn=document.createElement("button") deletebtn.innerHTML="Delete" deletebtn.setAttribute("class" , "btn btn-sm btn-danger") deletebtn.setAttribute("onclick" , "deleteClient("+i+")") actionTd.appendChild(editBtn) actionTd.appendChild(deletebtn) myTr.appendChild(actionTd) document.getElementById("form-list-client-body").appendChild(myTr) } document.getElementById("client-name").value=""; document.getElementById("client-email").value="" } //Editing Client function editClient(i){ console.log(clients[i]) myIndex=i; var updatebtn=document.createElement("button") updatebtn.innerHTML="Update"; updatebtn.setAttribute("class", "btn btn-sm btn-success") updatebtn.setAttribute("onclick","updClient()") document.getElementById("saveupdate").innerHTML="" document.getElementById("saveupdate").appendChild(updatebtn); document.getElementById("client-name").value=clients[i].name document.getElementById("client-email").value=clients[i].email } //Updating Client function updClient(){ var updatedClient={ name:document.getElementById("client-name").value, email:document.getElementById("client-email").value } clients[myIndex]=updatedClient; var crbtn=document.createElement("button") crbtn.innerHTML="Save"; crbtn.setAttribute("onclick","addClient()") crbtn.setAttribute("class","btn btn-sm btn-success") document.getElementById("saveupdate").innerHTML="" document.getElementById("saveupdate").appendChild(crbtn); displayClients() } //deleting client function deleteClient(i){ clients.splice(i,1) displayClients() }

Related: See More

Vuetify Material Dashboard

Questions / Comments: