Introdução
A exibição de dados em tabela é uma das formas mais comuns de ser encontrada em sistemas comerciais, independente do segmento de mercado ao qual atendem. As tabelas ou grids, desempenham um papel fundamental nas aplicações que precisam listar dados de forma organizada (linhas e colunas).
Na maioria das telas de consulta utiliza-se uma (ou várias) tabela(s) para apresentar o resultado da busca para o usuário, onde muitas vezes este pode selecionar as linhas registros e efetuar operações como edição e exclusão de registros.
Em muitos casos, principalmente em sistemas web, quando o usuário deseja editar uma linha da tabela, os dados são enviados para um formulário onde são apresentados em campos de texto, datepickers, etc.
Porém, existem situações onde pode ser interessante permitir ao usuário editar os dados direto na tabela, alterando o valor de cada célula sem necessitar utilizar outra página ou um formulário separado. Visando atender a situações desse tipo, este artigo apresenta uma solução simples e de fácil implementação da funcionalidade de edição de tabelas HTML utilizando a biblioteca jQuery.
O código HTML
A estrutura da página HTML utilizada será bastante simples, consistindo apenas de uma tabela com três linhas (além do cabeçalho). O código da listagem abaixo pode ser copiado e salvo com extensão HTML.
Listagem 1: Código HTML utilizado para exemplo
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Navegador em tabela HTML</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table class="tabelaEditavel">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
<th>E-mail</th>
<th>Telefone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>João Carlos</td>
<td>joca@email.com</td>
<td>(21) 9999-8888</td>
</tr>
<tr>
<td>002</td>
<td>Maria Silva</td>
<td>mariasilva@mail.com</td>
<td>(81) 8787-8686</td>
</tr>
<tr>
<td>003</td>
<td>José Pedro</td>
<td>zepedro@meuemail.com</td>
<td>(84) 3232-3232</td>
</tr>
</tbody>
</table>
</body>
</html>No cabeçalho da página (tag head) foram feitas referências ao seguintes arquivos:
- estilo.css: arquivo CSS contendo algumas formatações básicas para melhorar a aparência da página e facilitar a visualização do exemplo em funcionamento. O conteúdo desse arquivo será apresentado a seguir.
- http://code.jquery.com/jquery-1.8.3.min.js: biblioteca jQuery necessária para implementar a funcionalidade em questão. Sem ela, o código Javascript utilizado seria muito mais extenso e complexo. Nesse exemplo foi usado o arquivo hospedado no site oficial, poderia ser usado um arquivo local (fazendo download nesse link, por exemplo), bastando alterar o caminho da referência.
- script.js: nesse arquivo Javascript estará contido o código que dará à tabela a funcionalidade desejada. O conteúdo desse arquivo será apresentado a seguir.
Melhorando a aparência da página
Apenas para dar um visual mais agradável à página e tornar a organização dos dados mais visível, será aplicada uma folha de estilos básica (arquivo estilo.css), conforme o código a seguir.
Listagem 2: Conteúdo do arquivo estilo.css
* {
font-family:Consolas
}
.tabelaEditavel {
border:solid 1px;
width:100%
}
.tabelaEditavel td {
border:solid 1px;
}
.tabelaEditavel .celulaEmEdicao {
padding: 0;
}
.tabelaEditavel .celulaEmEdicao input[type=text]{
width:100%;
border:0;
background-color:rgb(255,253,210);
}Além de formatar o a tabela, foi definida uma classe específica, a classe “celulaEmEdicao”. Ela define alguns detalhes para a célula da tabela, quando esta estiver em edição. Essa classe será usada posteriormente no código Javascript e será adicionada e removida das tags td quando o usuário editar o texto da célula.
Após a aplicação dessa folha de estilos, abrindo o arquivo HTML no browser, deve-se obter o seguinte resultado:
Figura 1: Página aberta no browser
O código Javascript/jQuery
O processo de edição funcionará da seguinte forma: o usuário deve dar dois cliques sobre a célula que deseja editar, digitar o novo valor e pressionar a tecla Enter para finalizar a edição.
Sendo assim, tudo ocorrerá no evento dblclick das tags td, ou seja, das células da tabela. A seguir temos o conteúdo do arquivo script.js, que logo se percebe ser bastante simples.
Listagem 3: Conteúdo do arquivo script.js
$(function () {
$("td").dblclick(function () {
var conteudoOriginal = $(this).text();
$(this).addClass("celulaEmEdicao");
$(this).html("<input type='text' value='" + conteudoOriginal + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var novoConteudo = $(this).val();
$(this).parent().text(novoConteudo);
$(this).parent().removeClass("celulaEmEdicao");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(conteudoOriginal);
$(this).parent().removeClass("celulaEmEdicao");
});
});
});A explicação de cada linha do código acima é dada a seguir:
- Linhas 1 e 22: abertura e fechamento da função principal que trata o evento ready do documento. Tudo que precisa ocorrer quando a página for carregada deve estar no corpo dessa função.
- Linhas 2 e 21: abertura e fechamento da função que trata o evento dblclick das tags td. O tratamento da edição fica no interior dessa função.
- Linha 3: obtenção e registro do valor contido na célula a ser editada. Esse valor será usado posteriormente.
- Linha 5: adição da classe celulaEmEdicao à célula em que o usuário deu duplo clique.
- Linha 6: inserção de um input na célula, contendo o valor que havia originalmente nesta.
- Linha 7: direcionamento do foco (cursor) para o input que acabou de ser criado, de forma que o usuário não precise clicar novamente sobre ele.
- Linhas 9 e 15: abertura e fechamento da função que trata o evento keypress do input. A palavra reservada this faz referência à célula que foi clicada. Usamos as funções children e first para pegar o primeiro elemento filho da célula, ou seja, o input.
- Linhas 10 e 14: abertura e fechamento do operador IF para verificar se a tecla pressionada foi o Enter. Em caso positivo, executa as linhas de 11 a 13.
- Linha 11: armazena, na variável novoConteudo, o valor digitado pelo usuário no input, para posteriormente colocar na célula o novo valor. Nessa linha e nas duas seguintes a palavra reservada this faz referência ao input, e não mas à tag td.
- Linha 12: coloca na célula o novo valor digitado no input, usando a função text da jQuery que obtém ou altera (nesse caso) o texto de um elemento. Nessa linha foi usada a função parent para capturar a célula (tag td que contém o input), pois a instrução encontra-se dentro de uma função do próprio input e não mais da td.
- Linha 13: remove a classe celulaEmEdicao da célula que acabou de ser editada.
- Linhas 17 e 20: abertura e fechamento da função que trata o evento blur (quando o elemento perde o foco) do input. Será usada para retornar o valor original da célula, caso o usuário saia o input sem pressionar Enter.
- Linha 18: usando novamente a função text, volta o texto da célula para o conteúdo original.
- Linha 19: remove a classe celulaEmEdicao da célula que acabou de ser editada.
Tendo entendido o funcionamento do código, pode-se abrir novamente o arquivo no browser (ou atualizar, caso já estivesse aberto) e verificar o exemplo em execução, como ilustra a figura abaixo.
Figura 2: Tabela com célula em edição
Figura 3: Tabela com célula editada
Conclusão
Nesse artigo foi apresentada uma proposta de código simples, de fácil implementação e entendimento para permitir ao usuário editar o conteúdo das células de uma tabela HTML diretamente na tabela, sem necessidade de um formulário auxiliar.
Foi utilizada a biblioteca jQuery, a qual garante um código muito mais simples que aquele que seria necessário caso fossem utilizados apenas os recursos nativos da linguagem Javascript.
A seção de comentários está aberta logo abaixo para dúvidas, críticas ou opiniões sobre o artigo em geral.
