javascript - 在 Javascript 中更新/编辑表

Question

我想编辑和更新我用按钮更新创建的表格。

我想要这样的东西:

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>

我一直在创建函数，所以请帮我创建函数。

Answer 1

这就是你想要的。

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>

完整代码

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>