如何从存储为对象数组的 HTML 表和 LocalStorage 中编辑/删除数据？

Question

我正在制作一个基于模式弹出的注册表单，当我插入任何用户时，他们的数据必须显示在 HTML 表中，同时数据必须作为对象数组存储在本地存储中。表格中，有用户数据，每一行数据必须有两个操作按钮，分别是编辑和删除。

当我单击删除时，必须从表和本地存储中删除所选行的数据。此外，该表必须将 id 显示为对象数组的长度。这样，当我删除第二行时，只有第二行会被删除，而不会删除其他行，并且当我尝试插入新数据行时，表或数组必须从最后停止的位置继续。就像我有 6 个对象数组一样，如果我删除第 2 行，那么如果我插入新用户，它必须存储在第 7 行中。

“编辑”按钮也是如此，当我选择第二行时，必须弹出模态表单，其中包含第二行的值。当我更改它时，表中选定的行和本地存储数组必须更新。只有选定的行才会被选择和更新。

我尝试做同样的事情，但我的编辑和删除不顺利，请帮助我。

Answer 1

根据场景，以下是观察到的案例 -

1. 假设您有一种方法可以将数据填充到表中，并将数据保存到本地存储中。
2. 编写一个删除方法，传入要删除的选定行的索引，更新数据数组，找到数组中的索引并使用拼接或过滤器删除它，将更新后的数组保存到本地存储并回调该方法填充/更新表数据。 （使用更新后的数组作为输入的填充方法。
3. 编辑操作也是如此，传递索引，更新数组，保存到本地存储，调用表的 populate 方法。

以下是基于共享场景的删除示例，提供具体代码可能有助于提供更多详细信息。

函数删除用户（id）{ const usersData = getDataFromLocalStorage(); const indexToDelete = usersData.findIndex(user => user.id === id);

  if (indexToDelete !== -1) {
    usersData.splice(indexToDelete, 1);
    localStorage.setItem('userData', JSON.stringify(usersData));
    populateTableData();
  }
}