我的任務是僅使用 HTML、CSS 和 JavaScript 構(gòu)建一個簡單的靜態(tài) CRUD 頁面。我快完成了,但我一生都無法弄清楚如何使更新功能發(fā)揮作用。這個想法是單擊鉛筆圖標,然后重寫該字段中的任何內(nèi)容。但是,我無法弄清楚如何將該功能擴展到所有三個領域,它只適用于其中一個領域。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);? });}? });}
使用 JavaScript 定位并更新表中的特定元素
慕標5832272
2023-08-10 15:30:05