Skip to main content
se añadieron 222 caracteres en el cuerpo
Origen Enlace
ArianJM
  • 3.4k
  • 10
  • 22

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`<th>Titulo 3<${numero}</th>";th>`;
    $filaTitulos.append(html);
}

agregar();
<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.

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 html = "<th>Titulo 3</th>";
    $filaTitulos.append(html);
}

agregar();
<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>

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.

Origen Enlace
ArianJM
  • 3.4k
  • 10
  • 22

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 html = "<th>Titulo 3</th>";
    $filaTitulos.append(html);
}

agregar();
<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>