<table class="tableWrap"> <tbody class="check"> <tr> <td class="items-img"> <img src="" alt="../img/" class="img_btn" /> </td> <td class="items-number">8500161923127</td> <td>book</td> <td>1</td> <td class="items-price">$10.05</td> </tr> </tbody> </table> tableWrap.addEventListener("click", (e) => { if (e.target.classList.contains("img_btn")) { e.target.classList.toggle("change"); console.log(e.target.parentNode.parentNode.children[1]); console.log(e.target.parentNode.parentNode.children[2]); console.log(e.target.parentNode.parentNode.children[3]); console.log(e.target.parentNode.parentNode.children[4]); const EPP = e.target.parentNode.parentNode; console.log(EPP); /* 🍉.price change */ const EPP1 = EPP.children[1].innerHTML; const EPP2 = EPP.children[2].innerHTML; const EPP3 = EPP.children[3].innerHTML; const EPP4 = EPP.children[4].innerHTML; if (e.target.classList.contains("change")) { // create innerHTML EPP.children[1].innerHTML = `${EPP1} <br> Discount`; EPP.children[2].innerHTML = `${EPP2} <br> <input type="number"> %`; EPP.children[3].innerHTML = `${EPP3} <br> <br>`; EPP.children[4].innerHTML = `${EPP4} <br> $ <input type="number">`; } else { // 🌊remove innerHTML EPP.children[1].innerHTML = EPP1; EPP.children[2].innerHTML = EPP2; EPP.children[3].innerHTML = EPP3; EPP.children[4].innerHTML = EPP4; } } });Hice una tabla desde javascript innerHTML. y cuando hago clic en una imagen dentro de la tabla, quiero poner más texto en cada nodo td. así que creo nuevos nodos td y cambio con nodos td originales. y cuando vuelvo a hacer clic en la imagen, quiero volver a los nodos originales. ejemplo) (clic en el botón img) libro -> libro de descuento, 10 $ -> 9 $
(botón img, haga clic de nuevo) libro de descuento -> libro, 9 $ -> 10 $.
así que hice una variable con nodos td originales. pero cuando revisé console.log, encontré que las variables están hechas con nodos modificados.
¿¿Qué puedo hacer??
Este es el archivo console.log que obtuve.
