Update / Edit Table in Javascript

Question

I want to edit and update the table I create with the button update.

I want something like this:

 function myFunction(){ var table = document.getElementById("myTable"); var row = table.insertRow(1); var rowFn = row.insertCell(0); var rowLn = row.insertCell(1); var tombol = row.insertCell(2); var firstName = document.getElementById("firstName"); var lastName = document.getElementById("lastName"); createButton(); rowFn.innerHTML = firstName.value; rowLn.innerHTML = lastName.value; firstName.value = ""; lastName.value = ""; }; function createButton(){ var td = document.querySelectorAll("td")[2]; var btnDel = document.createElement("button"); var btnUpdate = document.createElement("button"); btnDel.innerHTML = "Delete"; btnDel.setAttribute("onclick", "deleteFunction(this)"); td.appendChild(btnDel); btnUpdate.innerHTML = "Update"; btnUpdate.setAttribute("onclick", "updateFunction()"); btnUpdate.setAttribute("style", "margin-left: 5px;"); td.appendChild(btnUpdate); }

 <form> First Name : <br> <input type="text" id="firstName"><br> Last Name : <br> <input type="text" id="lastName"><br> </form> <button onclick="myFunction()">Submit</button> <table class="table" id="myTable"> <tr> <th>Name</th> <th>Last Name</th> <th>Action</th> </tr> </table>

I'm stuck to create the function, so please help me create the function.

Answer 1

Here's what you want.

deleteFunction()

 function deleteFunction(item) { item.parentElement.parentElement.remove(); }

 <div> <div> <button onclick="deleteFunction(this);">Delete 1</button> </div> </div> <div> <div> <button onclick="deleteFunction(this);">Delete 2</button> </div> </div> <div> <div> <button onclick="deleteFunction(this);">Delete 3</button> </div> </div>

updateFunction()

 function updateFunction(item) { item.parentElement.parentElement.children[0].innerText = document.getElementById("name").value; item.parentElement.parentElement.children[1].innerText = document.getElementById("last").value; }

 <input id="name" value="Mark"><br> <input id="last" value="Man"> <div> <label>First Name</label> <label>Last Name</label> <div> <button onclick="updateFunction(this);">Update</button> </div> </div>

Full Code

 function myFunction(){ var table = document.getElementById("myTable"); var row = table.insertRow(1); var rowFn = row.insertCell(0); var rowLn = row.insertCell(1); var tombol = row.insertCell(2); var firstName = document.getElementById("firstName"); var lastName = document.getElementById("lastName"); createButton(); rowFn.innerHTML = firstName.value; rowLn.innerHTML = lastName.value; firstName.value = ""; lastName.value = ""; }; function createButton(){ var td = document.querySelectorAll("td")[2]; var btnDel = document.createElement("button"); var btnUpdate = document.createElement("button"); btnDel.innerHTML = "Delete"; btnDel.setAttribute("onclick", "deleteFunction(this)"); td.appendChild(btnDel); btnUpdate.innerHTML = "Update"; btnUpdate.setAttribute("onclick", "updateFunction(this)"); btnUpdate.setAttribute("style", "margin-left: 5px;"); td.appendChild(btnUpdate); } function deleteFunction(elem) { elem.parentElement.parentElement.remove(); } function updateFunction(elem) { var firstName = prompt("Enter first name"); var lastName = prompt("Enter last name"); if (firstName !== "") { elem.parentElement.parentElement.children[0].innerText = firstName; } if (lastName !== "") { elem.parentElement.parentElement.children[1].innerText = lastName; } }

 <form> First Name : <br> <input type="text" id="firstName"><br> Last Name : <br> <input type="text" id="lastName"><br> </form> <button onclick="myFunction()">Submit</button> <table class="table" id="myTable"> <tr> <th>Name</th> <th>Last Name</th> <th>Action</th> </tr> </table>

Answer 2

 function User(id, firstname, lastname) { this.Id = id; this.FirstName = firstname; this.Lastname = lastname; } var UserList=[]; function Add(){ UserList.push({ Id:UserList.length+1, FirstName:$("#firstName").val(), LastName:$("#lastName").val() }); $("#firstName").val(''); $("#lastName").val(''); $("#id").val(''); LoadTable(); }; function LoadTable(){ $("#myTable tbody").html(''); var rows=" <tr><th>Name</th><th>Last Name</th> <th>Action</th></tr>"; for(i=0;i<UserList.length;i++){ rows =rows+ "<tr><td>" + UserList[i].FirstName + "</td><td>" + UserList[i].LastName + "</td><td> <a onclick='update("+UserList[i].Id+")'>update</a><a onclick='Delete("+UserList[i].Id+")'>Delete</a></td></tr>"; $(rows).appendTo("#myTable tbody"); } } function update(id){ var result = $.grep(UserList, function(e){ return e.Id == id; }); $("#firstName").val(result[0].FirstName); $("#lastName").val(result[0].LastName); $("#id").val(result[0].Id); $("#Add").hide(); $("#Update").show(); } function Update(){ for(i=0;i<UserList.length;i++){ if(UserList[i].Id==$("#id").val()){ UserList[i].FirstName=$("#firstName").val(); UserList[i].LastName=$("#lastName").val(); } } LoadTable(); $("#firstName").val(''); $("#lastName").val(''); $("#id").val(''); $("#Add").show(); $("#Update").hide(); } function Delete(id){ var result = $.grep(UserList, function(e){ return e.Id == id; }); var i = UserList.indexOf(result[0]); if (i >= 0) UserList.splice(i, 1); LoadTable(); }

 table{ border:1px solid gray; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> First Name : <br> <input type="text" id="firstName"><br> Last Name : <br> <input type="text" id="lastName"><br> <input type="text" id="id" style="display:none;"> </form> <button onclick="Add()" id="Add">Add</button> <button onclick="Update()" id="Update" style="display:none;">Update</button> <table class="table" id="myTable"> <tr> <th>Name</th> <th>Last Name</th> <th>Action</th> </tr> </table>