2

Tengo el siguiente código que me genera una tabla:

<input type="button" value="Genera una tabla" onclick="genera_tabla()">

<script type="text/javascript">
  function genera_tabla() {

    // Obtener la referencia del elemento body
    var body = document.getElementsByTagName("body")[0];

    // Crea un elemento <table> y un elemento <tbody>
    var tabla = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // Crea las celdas
    for (var i = 0; i < 3; i++) {
      // Crea las hileras de la tabla
      var hilera = document.createElement("tr");

      for (var j = 0; j < 2; j++) {
        // Crea un elemento <td> y un nodo de texto, haz que el nodo de
        // texto sea el contenido de <td>, ubica el elemento <td> al final
        // de la hilera de la tabla
        var celda = document.createElement("td");
        var textoCelda = document.createTextNode("celda en la hilera " + i + ", columna " + j);
        celda.appendChild(textoCelda);
        hilera.appendChild(celda);
      }

      // agrega la hilera al final de la tabla (al final del elemento tblbody)
      tblBody.appendChild(hilera);
    }

    // posiciona el <tbody> debajo del elemento <table>
    tabla.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tabla);
    // modifica el atributo "border" de la tabla y lo fija a "2";
    tabla.setAttribute("border", "2");
  }
</script>

Lo que quiero es que al presionar el botón nuevamente me borre la anterior tabla ósea que solo haya una tabla siempre. ¿Qué código modifico o agrego?

2 respuestas 2

1

Podrías agregarle a la tabla un identificador (ya sea un id, una class, etc.) para:

  • Primero buscamos mediante su identificador.
  • Si existe la eliminamos
  • Finalmente creamos la tabla.

Ejemplo:

function genera_tabla() {
  // Buscamos la tabla
  var tablaId = 'mi_tabla';
  var tabla = document.getElementById(tablaId);
  // Si la tabla existe, la eliminamos
  if (tabla) tabla.remove();

  // Obtener la referencia del elemento body
  var body = document.body;

  // Crea un elemento <table> y un elemento <tbody>
  tabla = document.createElement("table");
  // Le asignamos a la tabla un ID
  tabla.id = tablaId;
  
  var tblBody = document.createElement("tbody");
  // Crea las celdas
  for (var i = 0; i < 3; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");
    for (var j = 0; j < 2; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
      var celda = document.createElement("td");
      var textoCelda = document.createTextNode("celda en la hilera " + i + ", columna " + j);
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
    }
    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
  }

  // posiciona el <tbody> debajo del elemento <table>
  tabla.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tabla);
  // modifica el atributo "border" de la tabla y lo fija a "2";
  tabla.setAttribute("border", "2");
}
<input type="button" value="Genera una tabla" onclick="genera_tabla()">

1
  • Gracias me salvaste :) Commented el 4 may. 2021 a las 14:50
1

Esta línea después de almacenar body debería bastar:

var body = document.getElementsByTagName("body")[0];    
body.innerHTML = "";

Pero te recomiendo que crees un <div> para almacenar la tabla, después limpias el div de la misma forma anterior, con esto si deseas agregar más html al body, no se eliminará cada que crees una tabla.

1
  • 1
    También se va a eliminar el botón.
    – Sal
    Commented el 3 may. 2021 a las 19:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.