用JavaScript更新/编辑表

Question

我要使用按钮update编辑和更新我创建的表。

我想要这样的东西：

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

这就是你想要的。

const keys = Object.keys(res); let isTypeCorrect: boolean = ( ['result', 'additional-info'].every(key => keys.includes(key)) && keys.length === 2 )

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;
  }
}

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>