Cómo añadir una fila de tablas en jQuery

1. append() / prepend() para añadir la fila de la tabla en jQuery
2. Añadir una fila de tabla usando JavaScript

En la tabla HTML actual, el elemento tiene varios elementos internos como tbody, thead, tfoot para contener filas de datos.

<table id="test">
   <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Esto lleva a la necesidad de ser preciso al insertar la fila de la tabla en el DOM. jQuery viene con dos métodos de inserción en el DOM interior y exterior para añadir un elemento.

append() / prepend() para añadir la fila de la tabla en jQuery

Para añadir una fila en el cuerpo de la tabla usando jQuery, podemos usar DOM dentro de los métodos de inserción de append() o prepend() que añade un elemento al inicio o al final del elemento sugerido. Aquí seleccionaremos el elemento tbody del elemento table con id="test" para añadir una fila después de él.

<script>
  $("#test>tbody").append("<tr><td>Test Row Append</td></tr>");
   //adding row to end and start
  $("#test>tbody").prepend("<tr><td>Test Row Prepend</td></tr>");</script>

Después de ejecutar el siguiente script, el nuevo HTML tendrá el siguiente aspecto.

<table id="test">
   <tbody>
        <tr><td>Test Row Prepend</td></tr>
        <tr><td>Foo</td></tr>
        <tr><td>Test Row Append</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Este método de añadir una fila en jQuery se puede conseguir usando los métodos appendto() y prependto().

<script>
 $("<tr><td>Test Row Append</td></tr>").appendto("#test>tbody");
 $("<tr><td>Test Row Prepend</td></tr>").prependto("#test>tbody");
</script>

Uso de Inserción de DOM externo para insertar una fila de tabla en jQuery

jQuery viene con los métodos .after() y .before() para insertar un elemento después y antes del elemento especificado respectivamente. Podemos usar estos métodos para ser precisos añadiendo una fila de tabla en varias posiciones de la tabla.

<table>
 <tbody>
  <tr><td> Item First </td></tr>
  <tr><td> Item Last </td></tr>
 </tbody>
</table>

<script>
 $("table tbody:nth-child(1)").after("<tr><td> Item Second </td></tr>");
	//adding second item after 1st item
 $("table tbody:last-child").before("<tr><td> Item Just Before Last</td></tr>");
	//adding an item before last item
<script>

Añadir una fila de tabla usando JavaScript

Alternativamente, también tiene una forma nativa de JavaScript de añadir una fila a la tabla usando la función insertRow().

<table id="test">
  <tr>
    <td>row1 column1</td>
    <td>row1 column2</td>
  </tr>
</table>

<script>
function addrow(){
 var table = document.getElementById("test");
 var row = table.insertRow(0);
  //this adds row in 0 index i.e. first place
 row.innerHTML = "<td>row0 column1</td><td>row0 column2</td>";
}
</script>