Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

271
Vistas
(javascript) How I make hide and show innerHTML like classList.toggle on table html?
    <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;
          }
        }
      });

I made a table from javascript innerHTML. and when I click an image inside of the table, I wanna put more text in each td node.  so I create new td nodes and switch with original td nodes. and when I click the image again, I wanna go back to the original nodes. example) (img button click ) book -> discount book , 10$ -> 9$

(img button click  again ) discount book -> book , 9$ -> 10$.

so I made a variable with original td nodes. but when I check console.log, I found the variables are made with changed nodes. 

What can I do??

This is the console.log I got.

enter image description here

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda