如何通过JavaScript实现表格数据的删除与更新功能

嘿，我来帮你搞定删除和编辑用户的功能！先梳理下原代码里的几个小问题，再一步步实现需求：

首先，你原来的cityArray是把用户的每个属性单独push进去，这样数组变成了扁平的列表，不好对应到单个用户。咱们先把数组改成存储完整的用户对象，这样后续删除和编辑才好操作。

1. 修正数组存储逻辑 #

在add函数里，把原来循环push每个属性的代码，改成直接push整个user对象：

// 原代码（不推荐）：
// for(var key in user) {
//   cityArray.push(user[key]);
// }
// 改成：
cityArray.push(user);

2. 实现删除函数 #

首先修改Delete按钮的点击事件，把当前按钮元素传进去，这样能精准找到对应的行：

cell3.innerHTML="<input type='submit' value='Delete' onclick='deleteRow(this)'>";

然后实现deleteRow函数，同时删除表格行和数组里的对应用户对象：

function deleteRow(btn) {
  // 获取当前按钮所在的行
  const row = btn.parentNode.parentNode;
  // 计算数组中的索引（减去表头行的索引0）
  const index = row.rowIndex - 1;
  // 从表格中移除行
  row.parentNode.removeChild(row);
  // 从数组中删除对应的用户数据
  cityArray.splice(index, 1);
}

3. 实现编辑更新功能 #

咱们需要完成这几件事：点击Update按钮时把用户信息填充到输入框，切换Add按钮为Save模式，点击Save后同步更新数组和表格内容。

首先修改Update按钮的点击事件，传递当前按钮元素：

cell4.innerHTML="<input type='submit' value='Update' onclick='edit(this)'>";

然后添加全局变量记录编辑状态，再实现edit和saveEdit函数：

// 全局变量：记录当前正在编辑的行在数组中的索引
let editIndex = -1;

function edit(btn) {
  const row = btn.parentNode.parentNode;
  editIndex = row.rowIndex - 1;
  // 获取当前要编辑的用户数据
  const user = cityArray[editIndex];
  // 把数据填充到输入框
  document.getElementById("sname").value = user.Name;
  document.getElementById("sage").value = user.Age;
  document.getElementById("semail").value = user.Email;
  // 把Add按钮切换成Save按钮
  const addBtn = document.querySelector("button[onclick='add()']");
  addBtn.innerHTML = "Save";
  addBtn.setAttribute("onclick", "saveEdit()");
}

function saveEdit() {
  if (editIndex === -1) return; // 没有编辑状态时直接退出
  // 获取输入框的新值
  const name = document.getElementById("sname").value;
  const age = document.getElementById("sage").value;
  const email = document.getElementById("semail").value;
  // 更新数组中的用户数据
  cityArray[editIndex] = { Name: name, Age: age, Email: email };
  // 更新表格中的内容
  const row = document.getElementById("table").rows[editIndex + 1]; // +1是因为表头行是索引0
  row.cells[0].innerHTML = name;
  row.cells[1].innerHTML = age;
  row.cells[2].innerHTML = email;
  // 重置输入框和按钮状态
  document.getElementById("sname").value = "";
  document.getElementById("sage").value = "";
  document.getElementById("semail").value = "";
  const saveBtn = document.querySelector("button[onclick='saveEdit()']");
  saveBtn.innerHTML = "Add";
  saveBtn.setAttribute("onclick", "add()");
  editIndex = -1;
}

完整整合代码 #

把所有改动整合后的完整代码如下（还去掉了原代码里多余的空行，添加了操作后清空输入框的逻辑）：

<div align="center"> 
  <h1>User Form</h1> 
  <hr> 
  <label>User Name:</label> 
  <input type="text" id="sname" /><br><br> 
  <label>User Age:</label> 
  <input type="text" id="sage" /><br><br> 
  <label>User Email:</label> 
  <input type="text" id="semail" /><br><br> 
  <button onclick="add()">Add</button> 
</div> 
<br><br> 
<table align="center" width="1000px" border="2px" id="table"> 
  <tr> 
    <th>Name</th> 
    <th>Age</th> 
    <th>Email</th> 
    <th>Delete</th> 
    <th>Update</th> 
  </tr> 
</table> 
<script type="text/javascript"> 
var cityArray = [];
let editIndex = -1; // 记录当前编辑的索引

// 添加用户函数
function add() { 
  var inputName = document.getElementById("sname"); 
  var inputAge = document.getElementById("sage"); 
  var inputEmail = document.getElementById("semail"); 
  var user={ 
    Name:inputName.value, 
    Email:inputEmail.value, 
    Age:inputAge.value 
  };
  // 存储完整用户对象
  cityArray.push(user); 
  console.log(cityArray); 
  var table=document.getElementById('table'); 
  var row=table.insertRow(); 
  var cell0=row.insertCell(0); 
  var cell1=row.insertCell(1); 
  var cell2=row.insertCell(2); 
  var cell3=row.insertCell(3); 
  var cell4=row.insertCell(4); 
  cell0.innerHTML=user.Name; 
  cell1.innerHTML=user.Age; 
  cell2.innerHTML=user.Email; 
  cell3.innerHTML="<input type='submit' value='Delete' onclick='deleteRow(this)'>"; 
  cell4.innerHTML="<input type='submit' value='Update' onclick='edit(this)'>"; 
  // 清空输入框
  inputName.value = "";
  inputAge.value = "";
  inputEmail.value = "";
} 

// 删除用户函数
function deleteRow(btn) {
  const row = btn.parentNode.parentNode;
  const index = row.rowIndex - 1;
  row.parentNode.removeChild(row);
  cityArray.splice(index, 1);
}

// 进入编辑状态函数
function edit(btn) {
  const row = btn.parentNode.parentNode;
  editIndex = row.rowIndex - 1;
  const user = cityArray[editIndex];
  document.getElementById("sname").value = user.Name;
  document.getElementById("sage").value = user.Age;
  document.getElementById("semail").value = user.Email;
  // 切换按钮为Save模式
  const addBtn = document.querySelector("button[onclick='add()']");
  addBtn.innerHTML = "Save";
  addBtn.setAttribute("onclick", "saveEdit()");
}

// 保存编辑内容函数
function saveEdit() {
  if (editIndex === -1) return;
  const name = document.getElementById("sname").value;
  const age = document.getElementById("sage").value;
  const email = document.getElementById("semail").value;
  // 更新数组数据
  cityArray[editIndex] = { Name: name, Age: age, Email: email };
  // 更新表格显示
  const row = document.getElementById("table").rows[editIndex + 1];
  row.cells[0].innerHTML = name;
  row.cells[1].innerHTML = age;
  row.cells[2].innerHTML = email;
  // 重置状态
  document.getElementById("sname").value = "";
  document.getElementById("sage").value = "";
  document.getElementById("semail").value = "";
  const saveBtn = document.querySelector("button[onclick='saveEdit()']");
  saveBtn.innerHTML = "Add";
  saveBtn.setAttribute("onclick", "add()");
  editIndex = -1;
}
</script>

内容的提问来源于stack exchange，提问作者fahad ali