Nikhil Chandra Roy

Posted on Nov 25, 2020

Javascript CRUD Small Project

#javascript #crud #html

Today we are going to do a small javascript crud project.

CRUD stand for CREATE READ UPDATE DELETE
so, in our small project we will do first, create, read, update and delete.

we will use html,css, javascript and bootstrap for css frameworks.

First,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css'/>
</head>
<body>

</body>
</html>

and now we are going to make HTML bootstrap structure first.

paste inside the body,

 <div class="container p-5">
        <div class="form-group">
          <input type="text" class="form-control" name="" id="typeText" aria-describedby="helpId" placeholder="Enter website name">
        </div>

        <table class="table shadow-sm rounded-lg table-borderless ">
            <tbody>
                <tr>
                    <td><span class="text">trickbd.com</span> <span class="update float-right btn btn-primary badge mx-2">Update</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> </td>
                </tr>
            </tbody>
        </table>
    </div>

**our html,css work done. Now we are going to use javascript to create table row.

Create

create script tag below the body and paste there,

const $ = nikhil=> document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;


        function textPress(){
            if(event.key==='Enter'){
                let self_value = this.value
                console.log(self_value)
            }
        }

this script will show you the current value inside the console when you hit enter.
So, we will use the same way to update the dom when we hit enter.

Be sure to remove the tr tag in tbody cause we will apply every tr from javascript.

const $ = nikhil=> document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;

        let data_row = 0;
        function textPress(){
            if(event.key==='Enter'){
                data_row++;
                let self_value = this.value
                $('tbody').innerHTML += 
                `
                <tr data-row="${data_row}">
                    <td><span class="text">${self_value}</span> <span  class="update float-right btn btn-primary badge mx-2">Update</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> </td>
                </tr>
                `
            }
        }

now, replace the above script.
you can see how it will create a new tr.
** We can also remove the input value by doing this.value = ''; below the textPress function.
So, our Create is done out of CRUD.

Read ----- you can read each value, right?

Update

now, we are going to update each tr
so, for this we will write new code and improve our existing code.

const $ = nikhil => document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;
        let data_row = 0;
        function textPress() {
            if (event.key === 'Enter') {
                data_row++;
                let self_value = this.value
                if (!this.hasAttribute('data-update')) {
                    $('tbody').innerHTML +=
                        `
                <tr data-row="${data_row}">
                    <td><span class="text">${self_value}</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> <span onclick="Update(this)"  class="update float-right btn btn-primary badge mx-2">Update</span>  </td>
                </tr>
                `;
                }
                let update_attr = this.getAttribute('data-update');
                //console.log(update_attr);
                if (this.hasAttribute('data-update')) {
                    $(`[data-row='${this.getAttribute('data-update')}'] td .text`).textContent = self_value;
                    this.removeAttribute('data-update');
                }
                this.value = '';
            }
        }
        function Update(val) {
            let updateText = val.parentElement;
            $('#typeText').value = updateText.children[0].textContent;
            $('#typeText').setAttribute('data-update', updateText.parentElement.getAttribute('data-row'))
        }

now, we can CREATE, READ, UPDATE.

so, final thing is Delete

DELETE.

so, for delete we have to add onclick our delete span

<span onclick="Delete(this)" class="delete float-right btn btn-primary badge mx-2">delete</span>

and create new function with the name of function Delete(this) and paste below code for Delete function

function Delete(val){
            val.parentElement.parentElement.remove();
        }

that's it.
** Our CRUD is ready **

for full code, you can follow Github Repository

DEV Community