├── images ├── dos.png ├── fb.ico ├── uno.png ├── github.ico ├── linkedin.ico ├── twitter.ico ├── Mejorando.png ├── icon_page.png └── instagram.ico ├── README.md ├── js └── crud.js ├── index.html └── styles └── style.css /images/dos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/dos.png -------------------------------------------------------------------------------- /images/fb.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/fb.ico -------------------------------------------------------------------------------- /images/uno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/uno.png -------------------------------------------------------------------------------- /images/github.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/github.ico -------------------------------------------------------------------------------- /images/linkedin.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/linkedin.ico -------------------------------------------------------------------------------- /images/twitter.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/twitter.ico -------------------------------------------------------------------------------- /images/Mejorando.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/Mejorando.png -------------------------------------------------------------------------------- /images/icon_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/icon_page.png -------------------------------------------------------------------------------- /images/instagram.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/HEAD/images/instagram.ico -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ¿Que es un CRUD? 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/e8a0c6e7-a471-4345-bd15-632cdb765e7d/deploy-status)](https://app.netlify.com/sites/peaceful-volhard-95178f/deploys) 4 | 5 | CRUD hace referencia a un acrónimo de "Create, Read, Update and Delete" que en español significa "Crear, Leer, Actualizar y Borrar" que son las cuatro funciones básicas de la persistencia de Bases de Datos. 6 | 7 | CRUD se usa también a veces para describir convenciones de interfaz de usuario que facilita la vista, búsqueda y modificación de la información; a menudo se usa en programación de formularios (forms) e informes (reports). 8 | 9 | ### Funcionamiento 10 | #### Asi es como se vera al principio, debido a que no hemos ingresado datos 11 | ![Tabla donde iran los registros](images/uno.png) 12 | Para que luego se ingrese la informacion que ira en nuestra tabla! 13 | 14 | #### Luego cuando ya ingresemos datos, se veran así! 15 | ![Tabla donde iran los registros](images/dos.png) 16 | 17 | Donde tendremos las opciones de editar y eliminar registros para completar nuestro CRUD con HTML, CSS y JS 18 | 19 | ## Contacto 20 | [Linkedin](https://gt.linkedin.com/in/manuel-flores-abb71a15a/%7Bcountry%3Dno%2C+language%3Dno%7D?trk=people-guest_profile-result-card_result-card_full-click) 21 | [Twitter](https://twitter.com/Gerardo_fq) 22 | 23 | 24 | ###### A pesar de ser una Aplicacion simple, la optimize logrando los siguientes resultados! 25 | ![Resultados](images/Mejorando.png) 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /js/crud.js: -------------------------------------------------------------------------------- 1 | var Fila = null 2 | function onSubmit() { 3 | let DataForm = Leer() 4 | if (Fila == null){ 5 | InsertarDatos(DataForm) 6 | } else{ 7 | Actualizar(DataForm) 8 | Vaciar() 9 | } 10 | } 11 | function Leer() { 12 | let DataForm = {} 13 | DataForm["nom"] = document.getElementById("nom").value 14 | DataForm["ape"] = document.getElementById("ape").value 15 | DataForm["pais"] = document.getElementById("pais").value 16 | return DataForm 17 | } 18 | function InsertarDatos(data) { 19 | let table = document.getElementById("tabla").getElementsByTagName('tbody')[0] 20 | let Fila = table.insertRow(table.length) 21 | columna1 = Fila.insertCell(0).innerHTML = data.nom 22 | columna2 = Fila.insertCell(1).innerHTML = data.ape 23 | columna3 = Fila.insertCell(2).innerHTML = data.pais 24 | columna3 = Fila.insertCell(3).innerHTML = ` 25 | ` 26 | document.getElementById("nom").focus() 27 | Vaciar() 28 | } 29 | function Vaciar() { 30 | document.getElementById("nom").value = "" 31 | document.getElementById("ape").value = "" 32 | document.getElementById("pais").value = "" 33 | Fila = null 34 | } 35 | function Editarr(td) { 36 | Fila = td.parentElement.parentElement 37 | document.getElementById("nom").value = Fila.cells[0].innerHTML 38 | document.getElementById("ape").value = Fila.cells[1].innerHTML 39 | document.getElementById("pais").value = Fila.cells[2].innerHTML 40 | } 41 | function Actualizar(DataForm) { 42 | Fila.cells[0].innerHTML = DataForm.nom 43 | Fila.cells[1].innerHTML = DataForm.ape 44 | Fila.cells[2].innerHTML = DataForm.pais 45 | document.getElementById("nom").focus() 46 | } 47 | function Borrarr(td) { 48 | if (confirm('¿Seguro de borrar este registro?')) { 49 | row = td.parentElement.parentElement 50 | document.getElementById("tabla").deleteRow(row.rowIndex) 51 | Vaciar() 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Crud JS 11 | 12 | 13 | 28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
NombreApellidoPaísOpciones
44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 |
52 |
53 | 54 |
55 |
56 |
57 | 58 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | /*Header*/ 2 | body{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | .header{ 7 | display: flex; 8 | justify-content: space-between; 9 | height: 70px; 10 | border-bottom: 1px solid #D5D9D9; 11 | margin-top: 0; 12 | padding-top: 0; 13 | } 14 | .header a{ 15 | font-size: 1em; 16 | font-family: 'Quicksand', sans-serif; 17 | color: #00438D; 18 | padding: 0 10px; 19 | height: inherit; 20 | display: flex; 21 | align-items: center; 22 | } 23 | .logo{ 24 | display: flex; 25 | margin-block-start: 3px; 26 | margin-block-end: 3px; 27 | margin-inline-start: 0px; 28 | margin-inline-end: 0px; 29 | } 30 | .logo img{ 31 | margin: 0px 0px 0px 5px ; 32 | display: flex; 33 | padding: 0; 34 | border: 0; 35 | } 36 | .header ol{ 37 | list-style: none; 38 | display: flex; /*Sirve para poner la lista de elementos de la lista horizontalmente*/ 39 | height: inherit; 40 | } 41 | .header ol li{ 42 | height: inherit; 43 | } 44 | .link:hover { 45 | color: white; 46 | background-color: #00438D; 47 | border: 0.5px solid #D5D9D9; 48 | } 49 | ol{ 50 | margin: 0; 51 | padding: 0; 52 | } 53 | /*menu*/ 54 | .menu{ 55 | height: inherit; 56 | } 57 | .menu li{ 58 | display: inline; /*para poner la lista en horizontal*/ 59 | } 60 | /*Footer*/ 61 | .footer{ 62 | display: block; 63 | justify-content: center; 64 | align-items: center; 65 | height: 50px; 66 | border-top: 1px solid #D5D9D9; 67 | margin-top: 0; 68 | padding: 1em; 69 | } 70 | a:link{ 71 | text-decoration: none; 72 | } 73 | .social{ 74 | width: 32px; 75 | height: 32px; 76 | display: inline-block; 77 | } 78 | .footer-fb{ 79 | background-image: url('../images/fb.ico'); 80 | } 81 | .footer-twitter{ 82 | background-image: url('../images/twitter.ico'); 83 | } 84 | .footer-instagram{ 85 | background-image: url('../images/instagram.ico'); 86 | } 87 | .footer-github{ 88 | background-image: url('../images/github.ico'); 89 | } 90 | .footer-linkedin{ 91 | background-image: url('../images/linkedin.ico'); 92 | } 93 | /*End Footer*/ 94 | form{ 95 | text-align: center; 96 | } 97 | .tablita{ 98 | display: inline-block; 99 | } 100 | /*Tablaaaaaa Estilos*/ 101 | .tabla{ 102 | border-collapse: collapse; /*Esta propiedad hace que parezca mas una tabla*/ 103 | font-family: 'Quicksand', sans-serif; 104 | } 105 | table tr th{ 106 | border: 1px solid #D5D9D9; 107 | width: 100px; 108 | height: 25px; 109 | color: white; 110 | background-color: #00438D; 111 | } 112 | /* Para el estilo de las nuevas celdas */ 113 | td { 114 | border: 1px solid #D5D9D9; 115 | width: 100px; 116 | height: 25px; 117 | } 118 | .caja{ 119 | display: block; 120 | } 121 | .caja label{ 122 | font-family: 'Quicksand', sans-serif; 123 | } 124 | .caja input{ 125 | width: 8em; 126 | height: 2em; 127 | text-align: center; 128 | font-family: 'Quicksand', sans-serif; 129 | } 130 | .submit{ 131 | width: 8em; 132 | height: 2em; 133 | font-family: 'Quicksand', sans-serif; 134 | color: white; 135 | background-color: #00438D; 136 | border: 2px solid white; 137 | } --------------------------------------------------------------------------------