Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

linha inserida na tabela apaga após reiniciar a página

Após inserir uma linha e os dados do novo paciente na células da mesma,caso reinicie a página esta linha com recém criada é apagada. Como manter a uma nova linha inserida,com os dados do novo paciente,após reiniciar a página,mesmo sem usar a tag

...?

HTML

<section class="container">
                <h2> Adicionar novo paciente</h2>
                <p class="paragrafoI">Nome</p>
                <input size="109" type="text" id="nome" class="campo-entradaI">                
                <p class="paragrafoII">Peso</p>     
                <p class="paragrafoIII">Altura</p>
                <p class="paragrafoIV"> % de Gordura</p>                
                <div class="campodeentrada">
                <input size="20" type="text" id="peso">
                <input size="20" type="text" id="altura" >
                <input size="20" type="text" id="gordura">
                </div>
                <button id="append">Adicionar</button>
                <!--button.onclick= -->
            </section>
 CSS
paragrafoI{
    position: absolute;
    left: 265px;
}
.paragrafoII{
    position: absolute;
    left: 265px;
    margin-top: 60px ;
}
.paragrafoIII{
    position: absolute;
    left: 450px;
    margin-top: 60px ;

}
.paragrafoIV{
    position: absolute;
    left: 630px;
    margin-top: 60px ;

}
.campodeentrada{
    display: inline-block;
    position: relative;
    margin-top: 80px ;
}

.campo-entradaI{
        position: absolute;
        font-size: "18px";
        font-family: "Arial, Helvetica, sans-serif";
        left: 265px;
        margin-top: 20px;            
}

JAVASCRIPT
var adicionar=document.querySelector("#append"); // associa o botão "button" a variável adicionar.
adicionar.addEventListener("click",NovoPaciente);
function NovoPaciente(){

      var nome_novoPaciente=document.getElementById("nome").value;

      var peso_novoPaciente=document.getElementById("peso").value;
      var altura_novoPaciente=document.getElementById("altura").value;
      var gordura_novoPaciente=document.getElementById("gordura").value;

       //cálculo do IMC
       imc = (peso_novoPaciente/(altura_novoPaciente * altura_novoPaciente)).toFixed(2);

      // cria a nova linha (tr) na tabela.
      var novoPacienteTr=document.createElement("tr"); 

      // cria as células para nova linha (tr) criada acima.
      var nome_novoPacienteTd=document.createElement("td");
      var peso_novoPacienteTd=document.createElement("td");
      var altura_novoPacienteTd=document.createElement("td");
      var gordura_novoPacienteTd=document.createElement("td");
      var imcTd=document.createElement("td");

      // console.log(gordura_novoPacienteTd);

      // passa os valores para as novas células recém criadas.
      nome_novoPacienteTd.textContent = nome_novoPaciente;
      peso_novoPacienteTd.textContent = peso_novoPaciente;
      altura_novoPacienteTd.textContent = altura_novoPaciente;
      gordura_novoPacienteTd.textContent= gordura_novoPaciente;
      imcTd.textContent=imc;

     // insere as células com seus valores preenchidos,na nova linha (tr).
      novoPacienteTr.appendChild(nome_novoPacienteTd);
      novoPacienteTr.appendChild(peso_novoPacienteTd);
      novoPacienteTr.appendChild(altura_novoPacienteTd);
      novoPacienteTr.appendChild(gordura_novoPacienteTd);
      novoPacienteTr.appendChild(imcTd);

      // insere a nova linha(tr) com suas células preenchidas,na tabela.
      var tbody=document.querySelector("tbody"); // tag html tbody associada à variável tbody.
      tbody.appendChild(novoPacienteTr);
1 resposta
solução!

Oi, Samuel. Como vai?

Os dados adicionados na página não são salvos. Sempre que você recarrega a página, o seu navegador puxa o html, que não possui esses dados no código, e por isso, as linhas novas não existem mais. Você precisaria guardar esses dados em algum lugar, e depois recuperá-los.

Para isso, você precisaria usar técnicas como local storage, para armazenar esses dados no seu navegador. Ou conectar sua aplicação à um servidor.

Espero ter ajudado e bons estudos!