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.

hello vivek, I edited it

TimotiBagus
– TimotiBagus

2018-11-11 06:23:54 +00:00
Commented Nov 11, 2018 at 6:23 — TimotiBagus
– TimotiBagus, Commented Nov 11, 2018 at 6:23

Maytha8 · Accepted Answer · 2021-02-05 14:54:10Z

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>

what if i just want to update the first name without last name change to " "(no string)?
I've edited the question. If you leave the first name and/or the last name empty in the prompt boxes, it won't be updated.

shaghayegh sheykholeslami · Accepted Answer · 2018-11-11 08:14:52Z

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>

Collectives™ on Stack Overflow

Update / Edit Table in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related