Boa tarde a todos,
fiquei me perguntando como eu poderia fazer o duplo click para editar a td ao invés de apagá-la?
Desde já, obrigado!!
Boa tarde a todos,
fiquei me perguntando como eu poderia fazer o duplo click para editar a td ao invés de apagá-la?
Desde já, obrigado!!
Fala ai Ricardo, tudo bem? Nesse caso você poderia adicionar o evento dblclick
para os tr's
e quando o mesmo ocorrer precisa pegar os dados da linha e preencher o formulário.
Essa segunda parte de pegar os dados da linha e preencher o formulário pode ser feita de N maneiras, vai depender de como você está criando as tr's
atualmente.
Espero ter ajudado.
Boa Tarde Rodrigo, tudo bem com você?
Para efetuar essa lógica seria necessário termos um campo que fosse um identificador único, eu irei usar como base o nome,
ok?
A primeira coisa necessária a se fazer é ao invés de remover esse elemento, eu irei pedir para pegar os dados e passa para o formulário da seguinte maneira:
tabela.addEventListener("dblclick", function (event) {
var elementTR = event.target.parentNode;
var paciente = transformaHTMLParaPaciente(elementTR);
colocaDadosNoForm(paciente)
});
Então ao clicar, ao invés de deletar o event.target.parentNode
, eu irei passar para uma função que irá transformar os dados de HTML
para um objeto da seguinte maneira:
function transformaHTMLParaPaciente(elemento){
var nome = elemento.querySelector('.info-nome');
var peso = elemento.querySelector('.info-peso');
var altura = elemento.querySelector('.info-altura');
var gordura = elemento.querySelector('.info-gordura');
var imc = elemento.querySelector('.info-imc');
return {
nome: nome.innerHTML,
peso: peso.innerHTML,
altura: altura.innerHTML,
gordura: gordura.innerHTML,
imc: imc.innerHTML
}
}
Bem simples, recebemos o tr
e iremos capturar os campos e gerar um paciente
igual feito no curso :)
Agora a lógica é bem simples, dado que temos um paciente, vamos trocar os valores que está no formulário:
function colocaDadosNoForm(paciente) {
var form = document.querySelector("#form-adiciona");
form.nome.value = paciente.nome;
form.peso.value = paciente.peso;
form.altura.value = paciente.altura;
form.gordura.value = paciente.gordura;
}
Bem, nesse momento, o que temos é o seguinte:
adicionar
iremos adicionar um novo paciente com os dados atualizados ( porém repetido ) Dessa maneira precisamos então de um identificador único e alterar um pouco a função de salvar ( lembrando que poderíamos evitar esses passos, criando um novo botão próprio para atualizar)
Bem agora a nossa função ao invés de apenas adicionar ela irá fazer uma verificação de existência do paciente na tabela da seguinte maneira:
function adicionaPacienteNaTabela(paciente) {
var pacientes = document.querySelectorAll(".info-nome");
var pacienteNaTabela = null;
for (var pacienteHTML of pacientes) {
if (pacienteHTML.innerHTML === paciente.nome) {
pacienteNaTabela = pacienteHTML.parentNode;
break;
}
}
if (pacienteNaTabela) {
alteraPacienteNoForm(pacienteNaTabela, paciente);
} else {
var tabela = document.querySelector("#tabela-pacientes");
var pacienteTr = montaTr(paciente);
tabela.appendChild(pacienteTr);
}
}
Ou seja, a lógica é a seguinte, dado que iremos adicionar um paciente, percorremos todos os nomes da tabela e comparamos, se existir, iremos executar a função de alterarPaciente
, que é a seguinte:
function alteraPacienteNoForm(elementoHTML, paciente) {
elementoHTML.querySelector(".info-nome").innerHTML = paciente.nome;
elementoHTML.querySelector(".info-peso").innerHTML = paciente.peso;
elementoHTML.querySelector(".info-altura").innerHTML = paciente.altura;
elementoHTML.querySelector(".info-gordura").innerHTML = paciente.gordura;
elementoHTML.querySelector(".info-imc").innerHTML = paciente.imc;
}
Aqui temos uma função inversa da primeira, ao invés de pegar do formulário e transformar um paciente, estamos pegando o paciente e passando para o formulário os novos dados :)
Caso contrário continuamos o fluxo normal de montar a tr
e adicionar :)
Conseguiu Compreender?
Abraços e Bons Estudos!
Geovani, muito obrigado!
Pelo que eu entendi, se eu criasse um botão de atualizar seria mais lógico e o código, mais simples né? O que mudaria no código se eu colocasse um botão para atualizar os dados do paciente?
Ola Ricardo,
Acredito que o código apenas ficaria mais limpo, a diferença seria que essa parte do código:
var pacientes = document.querySelectorAll(".info-nome");
var pacienteNaTabela = null;
for (var pacienteHTML of pacientes) {
if (pacienteHTML.innerHTML === pacienteAdicionado.nome) {
pacienteNaTabela = pacienteHTML.parentNode;
break;
}
}
ficaria dentro do onClick
do botão de atualizar
, e a função de adicionar
voltaria a ficar como a antiga :)
Lembrando que também seria necessário trazer as funções de obtemPacienteDoFormulario
e validar o paciente que estão presentes do onClick
do adicionar :)
Neste caso seria ideal que aquele código base:
var paciente = obtermPacienteDoForm()
var erros = validaPaciente(paciente)
if( erros.length > 0) ....
`
Ficasse em uma outra função, para que tanto o botão de adicionar, quanto o de atualizar utilizassem o mesmo código ( para não haver duplicação desnecessária), dessa forma teríamos que fazer algo parecido como
botaoAtualizar.addEventListener("click", function ( event ) {
event.preventDefault();
var pacienteDoForm = obtemPacienteDoFormEValida();
var pacientes = document.querySelectorAll(".info-nome");
var pacienteNaTabela = null;
for (var pacienteHTML of pacientes) {
if (pacienteHTML.innerHTML === pacienteDoForm.nome) {
pacienteNaTabela = pacienteHTML.parentNode;
atualizaPaciente(pacienteNaTabela, pacienteNoForm);
}
}
form.reset();
var mensagensErro = document.querySelector("#mensagens-erro");
mensagensErro.innerHTML = "";
Mas a questão fundamental é que essa é a base de uma atualização de dados, mas quando avançamos no javascript
percebemos que as técnicas vão mudando um pouco, continuamos pegando os dados e passando para o formulário ( geralmente mandamos para uma outra página), mas como iremos salvar em um banco de dados, ou coisa do gênero, o que fazemos ao invés de percorrer a tabela e alterar, é fazer uma nova consulta ao banco e montar a tabela novamente :)
Abraços e Bons Estudos!
Muito obrigado Geovani!