javascript - 如何在 JavaScript 中单击 'EDIT' 按钮时使用特定数据预填充表单？ (不使用任何数据库)

Question

我使用简单的 JavaScript 代码提交表单，并将表单数据以对象的形式存储到数组中，然后单击按钮显示数据。我还为每个元素提供了两个按钮 -“编辑”和“删除”，同时在“操作”标题下以表格形式显示数据。

我可以将相应的 ID 传递给这些方法，以对特定条目/对象执行编辑和删除操作，并基于此我希望将数据保留在最终数组中并希望在操作后显示它们。

但是，我已经完成了“删除”功能，但无法获得任何线索来实现“编辑”按钮功能。我想知道 - 是否可以使用可用数据预填充表单并进行更改，然后在单击编辑按钮时再次将其保存回来？

注意:我没有为此使用任何数据库连接。在下面的代码中，我将对象存储在 dataArray

中

示例表单对象 - 我在提交后存储 dataArray:

0: CreateUser
description: "I am Web developer"
email: "test@gmail.com"
english: "english"
gender: "Male"
hindi: "hindi"
id: "12312"
name: "test"
othersLang: "others"
role: "dev"

请看一下——

function getEmployeeDetails() {
  let totalLength = userArray.length;

  if (totalLength === 0) {
    alert("No user Data Found");
    return;
  }

  let tbody = document.getElementById("tbody");
  tbody.innerHTML = "";

  for (let i = 0; i < userArray.length; i++) {
    let tr = `<tr id=` + userArray[i].id + `>`;
    tr +=
      "<td class='table-data'/td>" +
      userArray[i].id +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].name +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].email +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].gender +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].role +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].english +
      userArray[i].hindi +
      userArray[i].othersLang +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].description +
      "</td>" +
      `<td class="table-data">
      <button onclick="deleteUser(` +
      userArray[i].id +
      `)">Delete</button> || <button onclick="editUser( ` +
      userArray[i].id +
      `)">Edit</button>
      </td>`;

    tbody.innerHTML += tr;
  }
}

function deleteUser(id) {
  console.log('ID',id);
  userArray = userArray.filter(x => x.id === id);
  console.log("aftre", userArray);
  let elem = document.getElementById(id);
  elem.remove();
  return userArray;
}
function editUser(id) {
  console.log("edit", id);//prints corresponding id
}

我不确定这是否可以实现。

对此的任何建议都将受到高度赞赏。

Answer 1

我不确定我是否理解您想要实现的目标，但如果您尝试在不使用任何数据库的情况下预填充页面，则可以使用其中包含一些 json 数据的文件。请参阅JavaScript: Create and save file或者您几乎可以在加载事件中将其硬编码到页面中。

顺便说一句，如果您知道自己不会使用 Internet Explorer，则可以使用 find() 函数而不是 filter()，因为一旦发现您在其函数中传递的任何内容第一次出现，find()就会停止在数组上的迭代，而filter()将继续下去。鉴于您正在尝试使用唯一 ID 获取数据，因此最好使用它:)请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find