1

Necesito ayuda, necesito insertar una columna en el <thead> mediante un botón con JavaScript, en una tabla:

var cont = 0;
function agregar() {
    cont++;
    var html = "<th scope='col'>Nota 2</th>";
    $('#contenedor').append(html);
}

Tengo este código, pero solo me inserta un <th> después de la última fila y necesito agregar una columna.

1
  • Puedes poner la parte de la table del código HTML? AL menos desde el elemento #contenedor. En cualquier caso, el método append lo que hace es añadir al final del elemento HTML, por eso te sale al final.
    – ArianJM
    Commented el 25 mar. 2021 a las 7:28

1 respuesta 1

2

Si quieres usar append, tienes que usarlo en el elemento tr dentro del elemento th. Porque append añade el HTML al final del elemento.

let cont = 0;
const $filaTitulos = $('thead tr');

function agregar() {
    cont++;
    const numero = $filaTitulos.children().length + 1;
    const html = `<th>Titulo ${numero}</th>`;
    $filaTitulos.append(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Titulo 1</th>
      <th>Titulo 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cuerpo 1</td>
      <td>Cuerpo 2</td>
    </tr>
  </tbody>
</table>

<button onclick="agregar()">Agregar TH</button>

Si quieres añadir también al tbody, la idea es la misma, tienes que hacer append a cada tr dentro de tbody.

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.