Adicionando uma linha de tabela em jQuery: tutorial para iniciantes e profissionais

Como adicionar uma linha a uma tabela com jQuery: guia completo

Trabalhar com tabelas HTML é uma das tarefas mais comuns para um desenvolvedor frontend. E adicionar dinamicamente novas linhas a uma tabela é um clássico do gênero. Imagine: você está criando uma loja virtual, um painel administrativo para um blog ou um sistema de gerenciamento de tarefas. Quase sempre é necessário que o usuário possa clicar em um botão "Adicionar" — e uma nova entrada apareça na tabela.

Hoje, vamos detalhar como adicionar uma linha de tabela em jQuery. Isso não é apenas teoria seca, mas um tutorial prático passo a passo com exemplos de código reais. Você aprenderá sobre os métodos mais populares, as armadilhas e as melhores práticas. Vamos nessa!

Por que jQuery e não JavaScript puro?

A pergunta é pertinente. Sim, o JavaScript nativo já sabe trabalhar com o DOM há muito tempo, e o método document.createElement não foi cancelado. Mas jQuery adicionar linha de tabela ensina de forma mais rápida e fácil, especialmente se você é iniciante. O jQuery cuida da compatibilidade entre navegadores e oferece uma sintaxe elegante. Além disso, milhões de linhas de código em produção foram escritas em jQuery — e precisam ser mantidas. Portanto, conhecer essas técnicas é uma habilidade obrigatória para um desenvolvedor web.

HTML básico para nossos experimentos

Para começar, precisaremos de uma tabela simples. Aqui está a marcação — copie-a para seu arquivo HTML ou para um sandbox como CodePen.

<!DOCTYPE html><html lang="pt"><head>    <meta charset="UTF-8">    <title>Adicionar linha a tabela jQuery</title>    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script></head><body>

<h2>Lista de funcionários</h2><table id="employees" border="1">    <thead>        <tr>            <th>Nome</th>            <th>Cargo</th>            <th>Salário</th>        </tr>    </thead>    <tbody>        <tr>            <td>Ana</td>            <td>Desenvolvedor</td>            <td>150 000 ₽</td>        </tr>        <tr>            <td>Ivan</td>            <td>Designer</td>            <td>120 000 ₽</td>        </tr>    </tbody></table>

<button id="addRow">Adicionar linha</button>

<script>// Aqui estará nosso código jQuery</script>

</body></html>

Observe: a tabela possui thead (cabeçalho) e tbody (corpo). Esta é a estrutura semântica correta. Adicionar linha a tabela jQuery faremos exatamente no tbody, e não na tabela em si — assim não quebramos os cabeçalhos.

Método nº1: jQuery append — o clássico

A maneira mais popular é usar o método .append(). Ele adiciona o conteúdo ao final do elemento selecionado. No nosso caso — ao final do tbody.

Suponha que queremos adicionar um novo funcionário. O código será assim:

$('#addRow').on('click', function() {    var newRow = '<tr>' +                 '<td>Pedro</td>' +                 '<td>Gerente</td>' +                 '<td>100 000 ₽</td>' +                 '</tr>';    $('#employees tbody').append(newRow);});

Tudo é genialmente simples: montamos uma string HTML com a nova linha da tabela e a inserimos usando jQuery adicionar linha de tabela com o método append. Agora, a cada clique no botão, Pedro, o gerente, aparece na tabela.

Importante: se você não tiver tbody na marcação, o jQuery pode adicionar a linha diretamente na table, mas nesse caso ela pode ser inserida no lugar errado. Sempre use tbody!

Método nº2: prepend — adicionando linha no