├── README.md ├── index.html ├── script.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Pure-JavaScript-CRUD-Operations-with-Html 2 | Pure JavaScript CRUD Operations with Html 3 | 4 | Content discussed : 5 | - Design HTML Form 6 | - HTML Form Validation 7 | - HTML Table CRUD Operations 8 | 9 | ## Get the Code 10 | 11 | ``` 12 | $ git clone https://github.com/CodAffection/Pure-JavaScript-CRUD-Operations-with-Html.git 13 | ``` 14 | 15 | ## How it works ? 16 | 17 | :tv: Video tutorial on this same topic 18 | Url : https://youtu.be/-rNQeJi3Wp4 19 | 20 | Video Tutorial for JavaScript CRUD Operations with Html 23 | 24 | 25 | | :bar_chart: | List of Tutorials | | :moneybag: | Support Us | 26 | |--------------------------:|:---------------------|---|---------------------:|:-------------------------------------| 27 | | Angular |http://bit.ly/2KQN9xF | |Paypal | https://goo.gl/bPcyXW | 28 | | Asp.Net Core |http://bit.ly/30fPDMg | |Amazon Affiliate | https://geni.us/JDzpE | 29 | | React |http://bit.ly/325temF | | 30 | | Python |http://bit.ly/2ws4utg | | :point_right: | Follow Us | 31 | | Node.js |https://goo.gl/viJcFs | |Website |http://www.codaffection.com | 32 | | Asp.Net MVC |https://goo.gl/gvjUJ7 | |YouTube |https://www.youtube.com/codaffection | 33 | | Flutter |https://bit.ly/3ggmmJz| |Facebook |https://www.facebook.com/codaffection | 34 | | Web API |https://goo.gl/itVayJ | |Twitter |https://twitter.com/CodAffection | 35 | | MEAN Stack |https://goo.gl/YJPPAH | | 36 | | C# Tutorial |https://goo.gl/s1zJxo | | 37 | | Asp.Net WebForm |https://goo.gl/GXC2aJ | | 38 | | C# WinForm |https://goo.gl/vHS9Hd | | 39 | | MS SQL |https://goo.gl/MLYS9e | | 40 | | Crystal Report |https://goo.gl/5Vou7t | | 41 | | CG Exercises in C Program |https://goo.gl/qEWJCs | | 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Html CRUD with Pure JavaScript 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 37 | 53 | 54 |
15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 |
35 |
36 | 		38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
Full NameEMP CodeSalaryCity
52 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var selectedRow = null 2 | 3 | function onFormSubmit() { 4 | if (validate()) { 5 | var formData = readFormData(); 6 | if (selectedRow == null) 7 | insertNewRecord(formData); 8 | else 9 | updateRecord(formData); 10 | resetForm(); 11 | } 12 | } 13 | 14 | function readFormData() { 15 | var formData = {}; 16 | formData["fullName"] = document.getElementById("fullName").value; 17 | formData["empCode"] = document.getElementById("empCode").value; 18 | formData["salary"] = document.getElementById("salary").value; 19 | formData["city"] = document.getElementById("city").value; 20 | return formData; 21 | } 22 | 23 | function insertNewRecord(data) { 24 | var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0]; 25 | var newRow = table.insertRow(table.length); 26 | cell1 = newRow.insertCell(0); 27 | cell1.innerHTML = data.fullName; 28 | cell2 = newRow.insertCell(1); 29 | cell2.innerHTML = data.empCode; 30 | cell3 = newRow.insertCell(2); 31 | cell3.innerHTML = data.salary; 32 | cell4 = newRow.insertCell(3); 33 | cell4.innerHTML = data.city; 34 | cell4 = newRow.insertCell(4); 35 | cell4.innerHTML = `Edit 36 | Delete`; 37 | } 38 | 39 | function resetForm() { 40 | document.getElementById("fullName").value = ""; 41 | document.getElementById("empCode").value = ""; 42 | document.getElementById("salary").value = ""; 43 | document.getElementById("city").value = ""; 44 | selectedRow = null; 45 | } 46 | 47 | function onEdit(td) { 48 | selectedRow = td.parentElement.parentElement; 49 | document.getElementById("fullName").value = selectedRow.cells[0].innerHTML; 50 | document.getElementById("empCode").value = selectedRow.cells[1].innerHTML; 51 | document.getElementById("salary").value = selectedRow.cells[2].innerHTML; 52 | document.getElementById("city").value = selectedRow.cells[3].innerHTML; 53 | } 54 | function updateRecord(formData) { 55 | selectedRow.cells[0].innerHTML = formData.fullName; 56 | selectedRow.cells[1].innerHTML = formData.empCode; 57 | selectedRow.cells[2].innerHTML = formData.salary; 58 | selectedRow.cells[3].innerHTML = formData.city; 59 | } 60 | 61 | function onDelete(td) { 62 | if (confirm('Are you sure to delete this record ?')) { 63 | row = td.parentElement.parentElement; 64 | document.getElementById("employeeList").deleteRow(row.rowIndex); 65 | resetForm(); 66 | } 67 | } 68 | function validate() { 69 | isValid = true; 70 | if (document.getElementById("fullName").value == "") { 71 | isValid = false; 72 | document.getElementById("fullNameValidationError").classList.remove("hide"); 73 | } else { 74 | isValid = true; 75 | if (!document.getElementById("fullNameValidationError").classList.contains("hide")) 76 | document.getElementById("fullNameValidationError").classList.add("hide"); 77 | } 78 | return isValid; 79 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body > table{ 2 | width: 80%; 3 | } 4 | 5 | table{ 6 | border-collapse: collapse; 7 | } 8 | table.list{ 9 | width:100%; 10 | } 11 | 12 | td, th { 13 | border: 1px solid #dddddd; 14 | text-align: left; 15 | padding: 8px; 16 | } 17 | tr:nth-child(even),table.list thead>tr { 18 | background-color: #dddddd; 19 | } 20 | 21 | input[type=text], input[type=number] { 22 | width: 100%; 23 | padding: 12px 20px; 24 | margin: 8px 0; 25 | display: inline-block; 26 | border: 1px solid #ccc; 27 | border-radius: 4px; 28 | box-sizing: border-box; 29 | } 30 | 31 | input[type=submit]{ 32 | width: 30%; 33 | background-color: #ddd; 34 | color: #000; 35 | padding: 14px 20px; 36 | margin: 8px 0; 37 | border: none; 38 | border-radius: 4px; 39 | cursor: pointer; 40 | } 41 | 42 | form div.form-action-buttons{ 43 | text-align: right; 44 | } 45 | 46 | a{ 47 | cursor: pointer; 48 | text-decoration: underline; 49 | color: #0000ee; 50 | margin-right: 4px; 51 | } 52 | 53 | label.validation-error{ 54 | color: red; 55 | margin-left: 5px; 56 | } 57 | 58 | .hide{ 59 | display:none; 60 | } --------------------------------------------------------------------------------