6

tengo una duda, actualmente tengo una tabla HTML, pero quisiera agregar filas dinamicamente, lo estoy intentando de la forma DOM, pero no logro conseguirlo mi tabla es así:

<table border="1" id="tablaprueba">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nombres</th>
                        <th>Ap Paterno</th>
                        <th>Ap Materno</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

y de la siguiente manera estoy intentando agregar filas pero no logro, creo que aún no comprendo bien la forma de interactuar con DOM

function agregarFila() {

                    var Tbl = document.getElementById("tablaprueba");

                    var tblBody = Tbl.getElementsByTagName("tbody");

                    var hilera = document.createElement("tr");
                    var celda = document.createElement("td");
                    var textoCelda = document.createTextNode("celda");

                    celda.appendChild(textoCelda);
                    hilera.appendChild(celda);
                    tblBody.appendChild(hilera);
                    Tbl.appendChild(tblBody);

                }

3 respuestas 3

13

Suponiendo que la función que creaste se la asignamos al evento onclick de un button, te serviría lo siguiente

const agregarFila = () => {
  document.getElementById('tablaprueba').insertRow(-1).innerHTML = '<td></td><td></td><td></td><td></td>'
}

const eliminarFila = () => {
  const table = document.getElementById('tablaprueba')
  const rowCount = table.rows.length
  
  if (rowCount <= 1)
    alert('No se puede eliminar el encabezado')
  else
    table.deleteRow(rowCount -1)
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <table border="1" class="table" id="tablaprueba">
      <thead class="thead-dark">
        <tr>
          <th>ID</th>
          <th>Nombres</th>
          <th>Ap Paterno</th>
          <th>Ap Materno</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <div class="form-group">
      <button type="button" class="btn btn-primary mr-2" onclick="agregarFila()">Agregar Fila</button>
      <button type="button" class="btn btn-danger" onclick="eliminarFila()">Eliminar Fila</button>
    </div>
  </div>
</div>

Adicionalmente te incluyo un botón para eliminar filas por si lo necesitas :)

Nos comentas colega

1
3

Con jQuery es muy sencillo y dinamico, solo es ponerle un id al tbody y listo, seria asi:

html:

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<tbody id="tbody"></tbody>

js

function agregarFila() {


   var contendor  = $("#tbody").html();
    var nuevaFila   = '<tr>';
    nuevaFila   = '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila   = '</tr>';

    ('entro poner el tabla2222');
    $("#tbody").html(contendor+nuevaFila);

}

NOTA: debes importar la libreria de jquery:

espero te sirva! me cuentas

2
  • Muchas gracias, para el caso que lo necesito ahora, se me hizo un poco más practico el de arriba, pero ahora ya sé como acceder a los tags que estan dentro de otros, pensé que tenía que ir primero a la tabla y de ahí ir bajando hasta llegar al tbody. Commented el 29 ago. 2018 a las 2:48
  • Te recomiendo jquery, te facilita la vida y la sintaxis es mas corta, pero si es lo que necesitas no hay problema
    – srJJ
    Commented el 29 ago. 2018 a las 2:50
3

Puedes intentar lo siguiente:

Crear una tabla con el tbody vacío agregandole un id y dinamicamente con javascript puedes ir añadiendo filas tr cpn un innerHTML al ese tbody

document.getElementById("body").innerHTML += `
<tr>
      <td>Body 1</td>
      <td>Body 2</td>
</tr>
`;
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody id="body">

  </tbody>
</table>

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