add row to HTML table with JQuery in the Tbody

Question

add row to HTML table with JQuery in the Tbody

Navigation

#1 by (3 votes)

1

How can I add a row to an HTML table with JQuery? I have the following code but what it does is add a row in the part of thead of my table and the goal is to add it in the tbody.

 function agregarFila(Id, Nombres, ApellidoP, AppellidoM) {
   var htmlTags = '<tr><td>' + Id + '</td><td>' + 
       Nombres + '</td><td>' + ApellidoP + '</td><td>' + 
       AppellidoM + '</td></tr>';
   $('#tablaprueba tr:last').after(htmlTags);
  }

javascript jquery html dom

asked by Carlos Daniel Zárate Ramírez 29.08.2018 в 05:52

source

1 answer

Block in datepicker bootstrap date range from BD Doubt with POO exercise in Java - problem with array

score 3 · Accepted Answer

Use the append () function of JQuery and change the selector to $ ('# tbody test table') as the example

function agregarFila(Id, Nombres, ApellidoP, AppellidoM) {
   
   var htmlTags = '<tr>'+
        '<td>' + Id + '</td>'+
        '<td>' + Nombres + '</td>'+
        '<td>' + ApellidoP + '</td>'+
        '<td>' + AppellidoM + '</td>'+
      '</tr>';
      
   $('#tablaprueba tbody').append(htmlTags);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablaprueba">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nombres</th>
      <th>Apellido Paterno</th>
      <th>Apellido Materno</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>