Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

editar no lugar de apagar

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!!

5 respostas

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.

solução!

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?

  1. Modificar o comportamento do duplo clique

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:

  • Clicando com duplo clique atualizamos os campos do formulário e colocamos os dados do usuário
  • Se clicarmos em 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 tre 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 adicionarvoltaria 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!