Como Adicionar Linhas em uma Tabela com jQuery

No post anterior, vimos como remover as linhas dinâmicas de uma tabela sem usar os seletores do jQuery. Caso você queira ver, o link é esse.

Agora, neste tutorial, vamos aprender uma forma de adicionar linhas dinamicamente nessa mesma tabela, utilizando também o jQuery. Para isso, vamos adicionar um botão no footer da tabela.

Deve ficar assim:

jquery-add-rable-row

DEMO

Vamos começar com a marcação da nossa tabela…


Definindo a Tabela

A marcação da nossa tabela vai mudar um pouco. Ela deve possuir agora um <tbody> e um <tfooter> que é onde vai ficar o botão que adicionar linhas. Veja como deve ficar a marcação:

O <tbody> é essencial para tornar mais fácil adicionar as linhas através do jQuery. Essa tag auxilia o agrupamento das linhas, e também na contagem delas, caso seja necessário para o seu projeto.

Já o <tfooter> vai manter o botão de adicionar novas linhas separado do corpo da tabela. E isso também facilita na inserção de linhas e protege o nosso botão de ser colocado entre as linhas, por exemplo.

Observe a função AddTableRow( ), no evento onclick do botão.

É nessa função que vamos implementar para adicionar as linhas.


Criando a Função AddTableRow com JavaScript e jQuery

No tutorial anterior, criamos um arquivo chamado functions.js, para conter as nossas funções em um arquivo javascript externo. Vamos manter esse formato e adicionar, agora, a função AddTableRow.

Essa função deve estar com o formato de funções do jQuery, para que seja possível utilizarmos as funções dele.

Então, a função AddTableRow fica assim:

A variável cols vai conter toda a marcação das colunas da linha. É nela que você irá colocar os inputs, ou qualquer outra coisa que a sua linha deve ter.

E, na última coluna colocamos o botão de remover a linha.

Essa nova linha, que fica guardada na variável newRow, vai ser  anexada no final do corpo da tabela, usando o append(). Por isso a importância do tbody na marcação da tabela. [hr]


Pronto!

Agora temos um botão que adiciona linhas dinâmicas em uma tabela.

Eu usei esta solução para criar uma tela de vendas de produtos, e o usuário pode adicionar mais itens na lista (tabela) e digitar o código e a quantidade, por exemplo. Agora, é só adaptar para o seu projeto.

DEMO

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑