如何在表格tbody中显示数组值、实现数组元素追加及表格行与数组同步删除

我来帮你搞定这个需求！你的现有代码已经搭好了基础，但还缺少表格内容渲染和删除行并同步数组的功能。下面是修改后的完整代码，同时我会拆解关键部分的实现思路：

<html>
<head>
<title>Hello</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; }
.delete-btn { background-color: #ff4444; color: white; border: none; padding: 4px 8px; cursor: pointer; }
</style>
</head>
<body>
<input type="text" name="id" id="id" placeholder="输入ID">
<input type="text" name="name" id="name" placeholder="输入姓名">
<button type="button" id="submit">Add</button>
<table id="demo">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</body>
</html>
<script>
var users = [[1, "Yuvraj"], [2, "Shweta"], [3, "Namita"], [4,"Tanvi"]]

$(document).ready(function() {
  loadTable();
  // 事件委托绑定删除按钮（因为按钮是动态生成的，直接绑定会失效）
  $("#demo").on('click', '.delete-btn', function() {
    // 获取当前行的索引（减去表头行，所以减1）
    var rowIndex = $(this).closest('tr').index() - 1;
    // 从数组中删除对应元素
    users.splice(rowIndex, 1);
    // 重新渲染表格，保持同步
    loadTable();
  });
});

function loadTable() {
  var tbody = $("#demo tbody");
  // 先清空tbody，避免重复渲染旧数据
  tbody.empty();
  
  // 遍历数组，生成表格行
  for(var i = 0; i < users.length; i++){
    var tr = $("<tr></tr>");
    // 添加ID列
    tr.append($("<td></td>").text(users[i][0]));
    // 添加Name列
    tr.append($("<td></td>").text(users[i][1]));
    // 添加删除按钮列
    tr.append($("<td></td>").html('<button class="delete-btn">删除</button>'));
    // 将行添加到tbody
    tbody.append(tr);
  }
}

$("#submit").on('click', function() {
  var inputId = document.getElementById("id").value;
  var inputName = document.getElementById("name").value;
  
  // 简单验证：避免空值被添加到数组
  if(inputId && inputName) {
    var temp = [inputId, inputName];
    users.push(temp);
    // 清空输入框，提升体验
    $("#id, #name").val('');
    // 重新渲染表格
    loadTable();
  } else {
    alert("请填写ID和姓名！");
  }
});
</script>

关键改动说明： #

1. 表格渲染逻辑优化：

   • 新增<thead>表头，让表格结构更清晰规范
   • loadTable函数每次渲染前先清空tbody，解决重复添加旧数据的问题
   • 遍历数组时为每个元素生成对应的表格行，同时添加操作列的删除按钮

2. 添加功能完善：

   • 增加了输入非空验证，防止无效数据进入数组
   • 添加完成后自动清空输入框，提升用户操作体验

3. 删除功能实现：

   • 采用事件委托绑定删除按钮的点击事件，解决动态生成元素无法直接绑定事件的问题
   • 通过closest('tr')定位当前按钮所在行，计算索引后用splice方法同步删除数组中的对应元素
   • 删除后重新渲染表格，保证数组与表格内容完全同步

内容的提问来源于stack exchange，提问作者Shweta Shinde