only javascript using CREAT READ UPDATE AND DELETE

today I learn how to insert, read, update and delete only JavaScript. first, create a new form in HTML and add id new create function and condition now add CSS style and better this design

CRUD operation only javascript

Follow me and watch how to one page in crud operation on one page only for JavaScript using. First, create form now show this add data then how to update this data then now the last how to delete the data add now done crud operation in JavaScript


output:-


code here this code copy and create index.html file.

<!DOCTYPE html>
<html>

<head>
    <title>
        ONLY JAVASCRIPT USING CREAT READ UPDATE AND DELETE
    </title>
   
   <style type="text/css">
   	body > table{
    width: 80%;
}

table{
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
    background-color: #dddddd;
}

input[type=text], input[type=number] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit]{
    width: 30%;
    background-color: #ddd;
    color: #000;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
table{
    border: 1px solid #000;
    margin: 0 auto;
}
form div.form-action-buttons{
    text-align: center;
}
form
{
    padding: 10px;    
    border: 1px solid #000;
    width: 50%;
    margin: 10px auto;

}
form a{
    cursor: pointer;
    text-decoration: underline;
    color: #0000ee;
    margin-right: 4px;
}

label.validation-error{
    color:   red;
    margin-left: 5px;
}
h1{
    text-align: center;
    text-transform: uppercase;

}
.hide{
    display:none;
}
   </style>
</head>

<body>
<h1>only Javascript Using creat read update and delete</h1>
                <form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
                	
                    <div>
                        <label>First Name*</label><label class="validation-error hide" id="firstnameValidationError">This field is required.</label>
                        <input type="text" name="firstname" id="firstname">
                    </div>
                    <div>
                        <label>Last Name*</label>
                        <input type="text" name="lastname" id="lastname">
                    </div>
                    <div>
                        <label>Age*</label>
                        <input type="text" name="age" id="age">
                    </div>
                    <div>
                        <label>Address*</label>
                        <input type="text" name="address" id="address">
                    </div>
                    <div  class="form-action-buttons">
                        <input type="submit" value="Submit">
                    </div>
                </form>
          
                <table  id="employeeList">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Age</th>
                            <th>Address</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            
    <script>
    	var selectedRow = null

function onFormSubmit() {
    if (validate()) {
        var formData = readFormData();
        if (selectedRow == null)
            insertNewRecord(formData);
        else
            updateRecord(formData);
        resetForm();
    }
}

function readFormData() {
    var formData = {};
    formData["firstname"] = document.getElementById("firstname").value;
    formData["lastname"] = document.getElementById("lastname").value;
    formData["age"] = document.getElementById("age").value;
    formData["address"] = document.getElementById("address").value;
    return formData;
}

function insertNewRecord(data) {
    var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = data.firstname;
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = data.lastname;
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = data.age;
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = data.address;
    cell4 = newRow.insertCell(4);
    cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
                       <a onClick="onDelete(this)">Delete</a>`;
}

function resetForm() {
    document.getElementById("firstname").value = "";
    document.getElementById("lastname").value = "";
    document.getElementById("age").value = "";
    document.getElementById("address").value = "";
    selectedRow = null;
}

function onEdit(td) {
    selectedRow = td.parentElement.parentElement;
    document.getElementById("firstname").value = selectedRow.cells[0].innerHTML;
    document.getElementById("lastname").value = selectedRow.cells[1].innerHTML;
    document.getElementById("age").value = selectedRow.cells[2].innerHTML;
    document.getElementById("address").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
    selectedRow.cells[0].innerHTML = formData.firstname;
    selectedRow.cells[1].innerHTML = formData.lastname;
    selectedRow.cells[2].innerHTML = formData.age;
    selectedRow.cells[3].innerHTML = formData.address;
}

function onDelete(td) {
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("employeeList").deleteRow(row.rowIndex);
        resetForm();
    }
}
function validate() {
    isValid = true;
    if (document.getElementById("firstname").value == "") {
        isValid = false;
        document.getElementById("firstnameValidationError").classList.remove("hide");
    } else {
        isValid = true;
        if (!document.getElementById("firstnameValidationError").classList.contains("hide"))
            document.getElementById("firstnameValidationError").classList.add("hide");
    }
    return isValid;
}
    </script>
</body>

</html>

check the live demo here CRUD javascript form check out

ONLY JAVASCRIPT USING CREAT READ UPDATE AND DELETE

only Javascript Using creat read update and delete

First Name Last Name Age Address Action


output:-


Leave a Comment

Your email address will not be published. Required fields are marked *