In this tutorial we are going to lean how to edit selected row from HTML table using JavaScript. We are going to use completely native JavaScript and no any other native library like jQuery.
Using JavaScript edit table row using popup we are going to need to create a popup while editing so to do, that we have to create one with HTML & CSS but bootstrap provides a modal class which we can easily create such type of popup in blink of an eye.
We are going to use bootstrap in order to create one and perform the edit selected row from html table.
Let’s get started.
How to Edit Selected Row From HTML Table Using JavaScript?
So, to get started we first have to create an simple table with some records on it and create a popup model which with some of the table fields in order to edit update and delete. I have prepared some codes below to illustrate this with an example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Edit Selected ROW From HTML Table Using Javascript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/> </head> <body> <div class="container"> <table class="table table-striped"> <thead> <tr> <th scope="col">id</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Phone</th> <th scope="col">Address</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr id="row-1"> <th scope="row">1</th> <td class="name">Mark</td> <td class="email">mark@mail.com</td> <td class="phone">+99-2312312311</td> <td class="address">New-york</td> <td> <a onclick="toggleModal(this, 1)">Edit</a> <a onclick="removeRow(this)">Delete</a> </td> </tr> <tr id="row-2"> <th scope="row">2</th> <td class="name">Lara</td> <td class="email">lara@mail.com</td> <td class="phone">+99-2312312311</td> <td class="address">california</td> <td> <a onclick="toggleModal(this, 2)">Edit</a> <a onclick="removeRow(this)">Delete</a> </td> <tr id="row-3"> <th scope="row">3</th> <td class="name">Josef</td> <td class="email">josef@mail.com</td> <td class="phone">+99-2312312311</td> <td class="address">Texas</td> <td> <a onclick="toggleModal(this, 3)">Edit</a> <a onclick="removeRow(this)">Delete</a> </td> </tr> </tbody> </table> </div> <!-- Creating a popup modal --> <div class="modal" tabindex="-1" role="dialog" id="exampleModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Edit Table</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" id="email" class="form-control"> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" id="phone" class="form-control"> </div> <div class="form-group"> <label for="address">Address</label> <input type="text" id="address" class="form-control"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="saveInfo()">Save changes</button> <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button> </div> </div> </div> </div> <div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div> |
Now let’s write the JavaScript code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> let tableRowElement; function toggleModal(element) { tableRowElement = element.parentElement.parentElement; const name = tableRowElement.getElementsByClassName('name')[0].innerHTML; const email = tableRowElement.getElementsByClassName('email')[0].innerHTML; const phone = tableRowElement.getElementsByClassName('phone')[0].innerHTML; const address = tableRowElement.getElementsByClassName('address')[0].innerHTML; document.getElementById('name').value = name; document.getElementById('email').value = email; document.getElementById('phone').value = phone; document.getElementById('address').value = address; openModal(); } function saveInfo() { const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const address = document.getElementById('address').value; tableRowElement.getElementsByClassName('name')[0].innerHTML=name; tableRowElement.getElementsByClassName('email')[0].innerHTML=email; tableRowElement.getElementsByClassName('phone')[0].innerHTML=phone; tableRowElement.getElementsByClassName('address')[0].innerHTML=address; closeModal(); } function openModal() { document.getElementById("backdrop").style.display = "block" document.getElementById("exampleModal").style.display = "block" document.getElementById("exampleModal").classList.add("show"); } function closeModal() { document.getElementById("backdrop").style.display = "none" document.getElementById("exampleModal").style.display = "none" document.getElementById("exampleModal").classList.remove("show"); } function removeRow(current) { current.parentElement.parentElement.remove(); } </script> |
Leave a Reply