Desenvolvimento - HTML
Editando e Removendo linhas em uma tabela HTML com jQuery
Veja neste artigo como criar funcionalidades de adição, edição e exclusão de registros em uma tabela HTML usando o jQuery.
por Joel RodriguesSuponhamos a existência de uma tabela HTML simples, que liste um cadastro de clientes com três colunas: Nome, Telefone e Email. Desejamos adicionar funcionalidades para realizar adição, edição e exclusão de linhas dessa tabela. Para isso, utilizaremos JavaScript, mais especificamente, faremos uso do JQuery para manipular os eventos e funções que criaremos.
Vale ressaltar que não é foco deste artigo a forma como esses dados serão armazenados, trataremos as informações apenas na tabela HTML. Como sugestão, indico a leitura de outro artigo, no qual explico como armazenar dados no Local Storage do HTML 5: Local Storage: HTML 5 com JSON.
Então, mãos à obra. Para começar, adicionemos mais uma coluna à tabela na qual estarão os botões de ação (Salvar, Editar, Excluir) e um botão fora da tabela, este será responsável por iniciar a adição de um novo registro. Observemos a estrutura do HTML:
Listagem 1: estrutura do HTML
<html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="funcoes.js"></script> </head> <body> <button id="btnAdicionar”>Novo</button> <table id="tblCadastro"> <thead> <tr> <th>Nome</th> <th>Telefone</th> <th>Email</th> <th></th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
A estrutura é bastante simples, basicamente um botão e uma tabela. Foram adicionados links para dois arquivos JavaScript: o primeiro é a própria biblioteca JQuery (que pode ser encontrada online, mas no caso utilizei um arquivo local que obtive no site oficial) e o segundo é um arquivo que criaremos, no qual ficarão as funções que darão funcionalidade aos elementos do “cadastro de clientes”.
Criaremos quatro funções: Adicionar, Excluir, Editar e Salvar. Vejamos abaixo, o código de cada uma:
Listagem 2: função Adicionar
function Adicionar(){
$("#tblCadastro tbody").append(
"<tr>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"<td><img src='images/disk.png' class='btnSalvar'>
<img src='images/delete.png' class='btnExcluir'/></td>"+
"</tr>");
$(".btnSalvar").bind("click", Salvar);
$(".btnExcluir").bind("click", Excluir);
};
A função Adicionar cria uma nova linha na tabela, onde cada uma das primeiras colunas contém um campo de texto para entrada de dados e a última coluna contém duas imagens que funcionarão como botões de ação Salvar e Excluir/Cancelar. Após adicionar a linha com os campos para digitação, ligamos o evento onClick dos botões de ação a duas que escreveremos logo a seguir.
Listagem 3: função Salvar
function Salvar(){
var par = $(this).parent().parent(); //tr
var tdNome = par.children("td:nth-child(1)");
var tdTelefone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
var tdBotoes = par.children("td:nth-child(4)");
tdNome.html(tdNome.children("input[type=text]").val());
tdTelefone.html(tdTelefone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
tdBotoes.html("<img src='images/delete.png'
class='btnExcluir'/><img src='images/pencil.png' class='btnEditar'/>");
$(".btnEditar").bind("click", Editar);
$(".btnExcluir").bind("click", Excluir);
};
Inicialmente, esta função localiza o elemento pai do elemento que contém o botão Salvar, ou seja, o elemento TR que contém o TD no qual está o IMG. Conhecendo a linha da tabela que está em edição, localizamos individualmente cada uma das células, recuperando-as pelo índice com que aparecem na linha. Feito isso, atualizamos o conteúdo de cada célula, passando para elas o valor do campo de texto nela contido. Com isso, finalizamos a inserção do registro. Ao final, atualizamos as funções dos botões Editar e Excluir. Isso é necessário pois novos elementos não são referenciados, é necessário “forçar” a referência.
Listagem 4: função Editar
function Editar(){
var par = $(this).parent().parent(); //tr
var tdNome = par.children("td:nth-child(1)");
var tdTelefone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
var tdBotoes = par.children("td:nth-child(4)");
tdNome.html("<input type='text' id='txtNome' value='"+tdNome.html()+"'/>");
tdTelefone.html("<input type='text'
id='txtTelefone' value='"+tdTelefone.html()+"'/>");
tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
tdBotoes.html("<img src='images/disk.png' class='btnSalvar'/>");
$(".btnSalvar").bind("click", Salvar);
$(".btnEditar").bind("click", Editar);
$(".btnExcluir").bind("click", Excluir);
};
A função Editar tem funcionamento semelhante, em parte, as duas anteriores. Inicialmente são localizadas individualmente cada célula da linha que contém o botão que chamou a função. Tendo controle sobre estes elementos, adicionamos, a cada célula, um campo de texto (<input type=’text’>) cujo conteúdo inicial (propriedade value) é o texto existente na célula. Por fim, mais uma vez atualizamos as funções dos botões.
Listagem 5: função Excluir
function Excluir(){
var par = $(this).parent().parent(); //tr
par.remove();
};
Esta é, visivelmente, a função mais simples do nosso código. Seu funcionamento resume-se a identificar o elemento TR que contém o botão que chamou a função e removê-lo do seu elemento pai, ou seja, o TBODY da tabela.
Agora que já conhecemos as funções a serem utilizadas, resta apenas inicializar os eventos dos botões, ligando-os às funcionalidades definidas. Todo esse código é colocado dentro da função principal que é executada no momento em que a página é carregada. Segundo a sintaxe JQuery, nosso arquivo funções.js deve ter a seguinte estrutura:
Listagem 6: arquivo funções.js
$(function(){
//Código das funções Adicionar, Salvar, Editar e Excluir
$(".btnEditar").bind("click", Editar);
$(".btnExcluir").bind("click", Excluir);
$("#btnAdicionar").bind("click", Adicionar);
});
E assim concluímos nosso código. Basta testar e ver o resultado. O código-fonte está disponível para download nesta página.
Por enquanto isso é tudo. Caso surjam dúvidas sobre o conteúdo deste artigo, ponho-me à disposição para saná-las através dos comentários ou por email.
Clique aqui e baixe o código fonte do artigo
Um abraço a todos e até a próxima.
