使用 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 tabelafunction 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);

}