Adicionando Linhas em Tabelas Eficientemente com jQuery e JavaScript

Adicionar dinamicamente linhas a tabelas HTML é um requisito frequente no desenvolvimento web, particularmente ao construir interfaces de usuário interativas. Este tutorial demonstra métodos eficientes para alcançar isso usando jQuery e JavaScript puro, permitindo que você escolha a abordagem mais adequada ao seu projeto.

Sumário

• Adicionando Linhas de Tabela com append() e prepend() do jQuery
• Adicionando Linhas de Tabela com JavaScript Puro

Adicionando Linhas de Tabela com append() e prepend() do jQuery

jQuery oferece uma maneira concisa e eficiente de manipular o DOM. Seus métodos append() e prepend() se integram perfeitamente às estruturas de tabela.

Vamos considerar uma tabela HTML de exemplo:

<table id="myTable">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    <tr>
  </thead>
  <tbody>
    <!-- Linhas serão adicionadas aqui -->
  </tbody>
</table>

Para adicionar uma nova linha usando jQuery:

// Obter o corpo da tabela
let $tableBody = $('#myTable tbody');

// Criar a nova linha
let $newRow = $('<tr>');

// Criar e anexar células
$newRow.append('<td>Novo Nome</td>');
$newRow.append('<td>30</td>');

// Anexar a linha ao corpo da tabela
$tableBody.append($newRow); 

Este trecho de código seleciona o corpo da tabela, cria um novo elemento de linha, adiciona células de dados e anexa a linha completa à tabela. Para pré-inserir (adicionar ao início), simplesmente use $tableBody.prepend($newRow);.

Para cenários mais complexos ou para adicionar várias linhas, construir a string HTML da linha diretamente pode ser mais eficiente:

let newRowHTML = `<tr><td>Outro Nome</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

Lembre-se de sanitizar dados fornecidos pelo usuário para evitar vulnerabilidades XSS.

Adicionando Linhas de Tabela com JavaScript Puro

Entender a abordagem nativa do JavaScript fornece uma compreensão mais profunda da manipulação do DOM. Embora mais verboso, evita dependências externas.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Ainda Outro Nome';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Este código manipula diretamente o DOM usando métodos JavaScript padrão. Escolha o método que melhor se adapta às necessidades do seu projeto e ao seu nível de conforto com jQuery. Lembre-se de incluir a biblioteca jQuery se estiver usando os exemplos jQuery: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>