使用 JavaScript 定位并更新表中的特定元素

Question

我的任务是仅使用 HTML、CSS 和 JavaScript 构建一个简单的静态 CRUD 页面。我快完成了，但我一生都无法弄清楚如何使更新功能发挥作用。

这个想法是单击铅笔图标，然后重写该字段中的任何内容。但是，我无法弄清楚如何将该功能扩展到所有三个领域，它只适用于其中一个领域。

const createTd = item => {

  const Td = document.createElement("td");

  Td.innerHTML = item;

  return Td;

};

const createTdWithI = item => {

  const Td = document.createElement("td");

  const i = document.createElement("i");

  Td.innerHTML = item;

  Td.setAttribute("class", "tdEdit");

  Td.appendChild(i).setAttribute("class", "fas fa-edit");

  return Td;

}

const appendChildren = (parent, children) => {

  children.forEach(child => {

    parent.setAttribute("class", "tr");

    parent.appendChild(child);

  });

};

document.querySelector("#addClientBtn").addEventListener("click", () => {

  const clientName = document.querySelector("#name").value;

  const clientMovie = document.querySelector("#movie").value;

  const clientLocado = document.querySelector("#rentStatus").value;

  localStorage.setItem("clientName", clientName);

  localStorage.setItem("clientMovie", clientMovie);

  localStorage.setItem("clientLocado", clientLocado);

  const getTbody = document.querySelector("#tbody");

  const createTr = document.createElement("tr");

  const appendTr = getTbody.appendChild(createTr);

  const items = [

    createTdWithI(localStorage.getItem("clientName")),

    createTdWithI(localStorage.getItem("clientMovie")),

    createTdWithI(localStorage.getItem("clientLocado")),

    createTd('<i class="fas fa-trash"></i>')

  ];

  appendChildren(appendTr, items);

  

  deleteRow();

  updateItems();

});

// Deleta as linhas na tabela

function deleteRow() {

  let trashIcon = document.querySelectorAll(".fa-trash");

  trashIcon[trashIcon.length - 1].addEventListener("click", event => {

    trashIcon = event.target;

    trashIcon.parentNode.parentNode.parentNode.removeChild(trashIcon.parentNode.parentNode);

  });

}

  });

}

Answer 1

尝试这个function updateItems() {let editIcon = document.querySelectorAll(".fa-edit");// let targetText = document.querySelectorAll(".tdEdit");for(let icon of editIcon){icon.addEventListener('click', (event)=>{editIcon = event.target;editIcon.innerText = "test";}, false);}