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

我的任务是使用HTML、CSS和JavaScript构建一个简单的静态CRUD页面。我几乎完成了，但我一辈子都不知道如何使更新功能工作

想法是点击铅笔图标，然后重写该字段中的任何内容。但是，我不知道如何将该功能扩展到所有三个字段，它只适用于一个字段

这是菜单。如果你点击“地籍se”，它会用铅笔创建三个“td”，但只有一个有效（一个写着“locado？”）。下面是代码片段，但我使用了localStorage，因此无法正常运行

感兴趣的函数位于页面底部，称为“updateItems（）”

我提前感谢你的帮助

const createTd=item=>{
const Td=document.createElement（“Td”）；
Td.innerHTML=项目；
返回Td；
};
const createTdWithI=项目=>{
const Td=document.createElement（“Td”）；
常量i=document.createElement（“i”）；
Td.innerHTML=项目；
Td.setAttribute（“类”、“tdEdit”）；
Td.appendChild（i）.setAttribute（“类”、“fas-fa-edit”）；
返回Td；
}
const appendChildren=（父，子）=>{
children.forEach（child=>{
setAttribute（“类”、“tr”）；
父、子（子）；
});
};
document.querySelector（“#addClientBtn”）.addEventListener（“单击”，（）=>{
const clientName=document.querySelector（“#name”）.value；
const clientMovie=document.querySelector（“#movie”）.value；
const clientLocado=document.querySelector（“#rentStatus”）.value；
setItem（“clientName”，clientName）；
setItem（“clientMovie”，clientMovie）；
setItem（“clientLocado”，clientLocado）；
const getTbody=document.querySelector（“#tbody”）；
const createTr=document.createElement（“tr”）；
const appendTr=getTbody.appendChild（createTr）；
常数项=[
CreateTWithi（localStorage.getItem（“clientName”），
CreateTWithi（localStorage.getItem（“clientMovie”），
CreateTWithi（localStorage.getItem（“clientLocado”），
createTd（“”）
];
附件子项（附件，项目）；
deleteRow（）；
updateItems（）；
});
//代表林哈斯·塔贝拉
函数deleteRow（）{
让trashIcon=document.querySelectorAll（“.fa垃圾”）；
trashIcon[trashIcon.length-1]。addEventListener（“单击”，事件=>{
trashIcon=event.target；
trashIcon.parentNode.parentNode.parentNode.removeChild（trashIcon.parentNode.parentNode）；
});
}
函数updateItems（）{
让editIcon=document.queryselectoral（“.fa edit”）；
//设targetText=document.queryselectoral（“.tdEdit”）；
editIcon[editIcon.length-1]。addEventListener（“单击”，事件=>{
editIcon=event.target；
editIcon.innerText=“测试”；
//for（设i=0；i

西斯特马
贝姆·文多（a）。
地籍客户
诺姆

菲姆



洛卡多？
模拟
Não


地籍
诺姆
菲姆
洛卡多？
德莱塔
//乌苏瓦里奥诺姆教堂（Mostra o nome do usuário na tela de boas vindas）
document.querySelector（“#userNameWelcome”）.innerHTML=localStorage.getItem（“用户名”）；

试试这个

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);
}