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> <div> <input type="text" name="" aria-describedby="helpId" placeholder="Enter website name"> </div> <table> <tbody> <tr> <td><span>trickbd.com</span> <span>Update</span> <span>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 thetr tag in tbody cause we will apply everytr 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>${self_value}</span> <span >Update</span> <span>delete</span> </td> </tr> ` } }now, replace the above script.
you can see how it will create a newtr.
** We can also remove the input value by doingthis.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 eachtr
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>${self_value}</span> <span>delete</span> <span >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 deletespan
<span>delete</span>and create new function with the name offunction Delete(this) and paste below code forDelete function
function Delete(val){ val.parentElement.parentElement.remove(); }that's it.
** Our CRUD is ready **
for full code, you can followGithub Repository
For Hire me your project or like this project at,Freelancer.com
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
