"Gestor de Categorias"
Bootstrap 4.0.0 Snippet by evargas

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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-4"> <form class="form-horizontal" id="form-edit-client"> <fieldset> <!-- Form Name --> <legend>Agregar Nueva Categoria</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-1 control-label" for="categoria-name"> Nombre</label> <div class="col-md-12"> <input id="categoria-name" name="categoria-name" type="text" placeholder="nombre de tu categoria" class="form-control input-md"> </div> </div> </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="addCategoria()">Guardar categoria</button> </div> </div> </div> <div class="col-md-8"> <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> <!-- LIST --> <div class=col-md-12> </div> <br> <!-- view --> </div> </div> <script type="text/javascript"> </script> </body> </html>
var form = document.getElementById("form"); var inputIdStudent = document.getElementById("idStudent"); var inputFirstname = document.getElementById("categoria-name"); var labelFirstname = document.getElementById("categoria-name"); var inputLastname = document.getElementById("lastname"); var labelLastname = document.getElementById("labelLastname"); var btnCreateStudent = document.getElementById("createStudent"); var btnDeleteStudent = document.getElementById("deleteStudent"); var btnEditStudent = document.getElementById("editStudent"); var btnCancel = document.getElementById("cancelEdit"); var listStudents = document.getElementById("listStudents"); var json = document.getElementById("json"); var searchWord = document.getElementById("search"); function Student(id,firstname,lastname){ this.id = id; this.firstname = firstname; this.lastname = lastname; } Student.prototype = { setId : function (value){ this.id = value; }, getId : function(){ return this.id; }, setFirstname : function (value){ this.firstname = value; }, getFirstname : function(){ return this.firstname; }, setLastname : function (value){ this.lastmame = value; }, getLastname : function(){ return this.lastname; } } function ControllerStudent(){ this.listStudents = []; this.id = 0; } ControllerStudent.prototype = { create : function(firstname,lastname){ var student = new Student(this.id,firstname,lastname); this.listStudents.push(student); this.id += 1; return student; }, search : function(id){ var student = null; for (x=0;x<this.listStudents.length;x++) { if (this.listStudents[x].getId()==id) { student = this.listStudents[x]; } } return student; }, delete : function(student){ elementList = document.querySelectorAll("tr"); var idStudent = student.getId(); for (x=0;x<elementList.length;x++){ if (elementList[x].getAttribute("id") == idStudent ) { this.listStudents.splice(x,1); listStudents.removeChild(elementList[x]); } } }, update : function(student){ var oldStudent = this.search(student.getId()); for (x=0;x<this.listStudents.length;x++) { if (this.listStudents[x].id == oldStudent.getId()) { this.listStudents[x] = student; } } }, listAll : function(){ return listStudents; }, showAll : function(){ var contoller = this; for (x=0;x<this.listStudents.length;x++){ var ul = document.createElement("ul"); ul.setAttribute("id",this.listStudents[x].getId()); var liId = document.createElement("li"); liId.innerHTML = this.listStudents[x].getId(); var liFirstname = document.createElement("li"); liFirstname.innerHTML = this.listStudents[x].getFirstname(); var liLastname = document.createElement("li"); liLastname.innerHTML = this.listStudents[x].getLastname(); ul.appendChild(liId); ul.appendChild(liFirstname); ul.appendChild(liLastname); listStudents.appendChild(ul); ul.onclick = function(){ var id = this.getAttribute("id"); var student = contoller.search(id); inputIdStudent.value = student.getId(); inputFirstname.value = student.getFirstname(); inputLastname.value = student.getLastname(); btnCancel.style.display = "block"; btnEditStudent.style.display = "block"; btnDeleteStudent.style.display = "block"; btnCreateStudent.style.display = "none"; } } }, show : function(newStudent){ var contoller = this; elementList = document.querySelectorAll("tr"); var idStudent = newStudent.getId(); var tr = document.createElement("tr"); tr.setAttribute("id",newStudent.getId()); var liId = document.createElement("td"); liId.innerHTML = newStudent.getId(); var liFirstname = document.createElement("td"); liFirstname.innerHTML = newStudent.getFirstname(); var liLastname = document.createElement("td"); liLastname.innerHTML = newStudent.getLastname(); var action = document.createElement("td"); var editing = document.createElement("span"); editing.setAttribute("class","label label-info"); editing.innerHTML = "Editing"; action.appendChild(editing); editing.style.visibility = "hidden"; editing.setAttribute("id","edit"+newStudent.getId()); tr.appendChild(liId); tr.appendChild(liFirstname); tr.appendChild(liLastname); tr.appendChild(action); var find = false; for (x=0;x<elementList.length;x++){ if (elementList[x].getAttribute("id") == idStudent ) { listStudents.replaceChild(tr,elementList[x]); var find = true; } } if (!find) listStudents.appendChild(tr); tr.onclick = function(){ editing = document.getElementById("edit"+inputIdStudent.value); if (editing!=null) editing.style.visibility = "hidden"; var id = this.getAttribute("id"); var student = contoller.search(id); inputIdStudent.value = student.getId(); inputFirstname.value = student.getFirstname(); inputLastname.value = student.getLastname(); btnCancel.style.display = "block"; btnEditStudent.style.display = "block"; btnDeleteStudent.style.display = "block"; btnCreateStudent.style.display = "none"; btnCreateStudent.style.display = "none"; editing = document.getElementById("edit"+id); editing.style.visibility = "visible"; } } } var controllerStudent = new ControllerStudent(); btnCreateStudent.onclick = function(event){ event.preventDefault(); if (inputFirstname.value!="" && inputLastname.value!="") { var newStudent = controllerStudent.create(inputFirstname.value,inputLastname.value); controllerStudent.show(newStudent); inputFirstname.value = ""; inputLastname.value = ""; json.innerHTML = JSON.stringify(newStudent); } else{ } } form.onsubmit = function(event){ event.preventDefault(); } btnEditStudent.onclick = function(event){ event.preventDefault(); var student = new Student(inputIdStudent.value,inputFirstname.value,inputLastname.value); controllerStudent.update(student); controllerStudent.show(student); json.innerHTML = JSON.stringify(student); } btnCancel.onclick = function(event){ event.preventDefault(); btnCancel.style.display = "none"; btnEditStudent.style.display = "none"; btnDeleteStudent.style.display = "none"; btnCreateStudent.style.display = "block"; inputFirstname.value = ""; inputLastname.value = ""; editing = document.getElementById("edit"+inputIdStudent.value); editing.style.visibility = "hidden"; } btnDeleteStudent.onclick = function(event){ event.preventDefault(); var student = new Student(inputIdStudent.value,inputFirstname.value,inputLastname.value); controllerStudent.delete(student); btnCancel.style.display = "none"; btnEditStudent.style.display = "none"; btnDeleteStudent.style.display = "none"; btnCreateStudent.style.display = "block"; inputFirstname.value = ""; inputLastname.value = ""; } searchWord.onkeyup = function(){ var searchw = this.value; var students = controllerStudent.listStudents; for (x=0;x<students.length;x++){ var lengthWord = searchw.length; var tr = document.getElementById(students[x].getId()); if (searchw != (students[x].getFirstname()).substring(0,lengthWord)) { tr.style.display = "none"; } else { tr.style.display = "table-row"; } } }

Related: See More


Questions / Comments: