Como adicionar linha de tabela em jQuery

1. append()/prepend() para adicionar a linha da tabela em jQuery
2. Adicionar linha de tabela utilizando JavaScript

Na tabela HTML atual, o elemento HTML tem vários elementos internos como tbody , thead, tfoot para conter linhas de dados.

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

Isto leva à necessidade de ser preciso ao inserir a linha da tabela no DOM. jQuery vem com dois métodos de inserção interna e externa do DOM para adicionar um elemento.

append()/prepend() para adicionar a linha da tabela em jQuery

Para adicionar uma linha no corpo da tabela utilizando jQuery, podemos utilizar métodos de inserção DOM dentro de métodos de append() ou prepend() que adiciona um elemento ao início ou fim do elemento sugerido. Aqui selecionaremos o elemento tbody do elemento table com id="test" para adicionar uma linha depois dele.

<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>

Depois de executar o script a seguir, o novo HTML será parecido com o seguinte.

<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 adicionar uma linha em jQuery pode ser obtido utilizando o método appendto() e prependto().

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

Utilize a Inserção de DOM externo para inserir uma linha de tabela em jQuery

jQuery vem com métodos .after() e .before() para inserir um elemento depois e antes do elemento especificado, respectivamente. Podemos utilizar estes métodos para ser precisos, adicionando uma linha de tabela em várias posições de tabela.

<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>

Adicionar linha de tabela utilizando JavaScript

Alternativamente, também tem uma forma JavaScript nativa de adicionar uma linha à tabela utilizando a função 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>