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

Dúvida form baseado no curso

Olá, estou criando um um formulário para responder reclamações de clientes. A ideia é que tenha uma coluna que enquanto o local da resposta estiver vazio ela calcule a diferença entre a data atual e a data de registro (campo de um formulário) e se estiver respondido que ela apareça concluído.

No vídeo foi criado manualmente algumas linhas na tabela e a alteração do valor do imc ficou associada pela id desse td.

Criei a fomula para dizer os dias sem colocar tds manuais. Como procedo para alterar o fundo dessa célula?

segue js

var botaoAdd = document.querySelector("#add-registro");
botaoAdd.addEventListener("click", function(event){
    event.preventDefault();

//captando dados do form
 var form = document.querySelector("#form-add");

 var numid = form.numid.value;
 var dataRec = form.datarec.value;
 var dataReg = form.datareg.value;
 var tipo = form.tipo.value;
 var origem = form.origem.value;
 var rast = form.rastrfonte.value;
 var escopo = form.escopo.value;
 var setor = form.setor.value;
 var unidade = form.unidade.value;
 var area = form.area.value;
 var perfil = form.perfil.value;
 var grTeor = form.grteor.value;
 var voc = form.voc.value;
 var resposta = form.resposta.value;
 var dataResp = form.dataresp.value;
 var status = ((new Date() - new Date(form.datarec.value))/(1000*60*60*24))
// coluna status

 if(form.resposta.value === '' ){
      var status = parseInt((new Date() - new Date(form.datarec.value))/(1000*60*60*24));
 }else{
      var status = "concluído";
 }
 console.log(status);
//cria tr e td

var registroTr = document.createElement("tr");

var numidTd =  document.createElement("td");
var dataRecTd = document.createElement("td");
var dataRegTd = document.createElement("td");
var tipoTd = document.createElement("td");
var origemTd =document.createElement("td");
var rastTd = document.createElement("td");
var escopoTd = document.createElement("td");
var setorTd = document.createElement("td");
var unidadeTd = document.createElement("td");
var areaTd = document.createElement("td");
var perfilTd = document.createElement("td");
var grTeorTd = document.createElement("td");
var vocTd = document.createElement("td");
var respostaTd = document.createElement("td");
var dataRespTd = document.createElement("td");
var statusTd = document.createElement("td");


 numidTd.textContent =  numid;
dataRecTd.textContent = dataRec;
dataRegTd.textContent = dataReg;
tipoTd.textContent = tipo;
origemTd.textContent = origem;
rastTd.textContent = rast;
escopoTd.textContent = escopo;
setorTd.textContent = setor;
unidadeTd.textContent = unidade;
areaTd.textContent = area;
perfilTd.textContent = perfil;
grTeorTd.textContent = grTeor;
vocTd.textContent = voc;
respostaTd.textContent = resposta;
dataRespTd.textContent = dataResp;
statusTd.textContent = status;
console.log(statusTd.textContent);

registroTr.appendChild(numidTd);
registroTr.appendChild(dataRecTd);
registroTr.appendChild(dataRegTd);
registroTr.appendChild(tipoTd);
registroTr.appendChild(origemTd);
registroTr.appendChild(rastTd);
registroTr.appendChild(escopoTd);
registroTr.appendChild(setorTd);
registroTr.appendChild(unidadeTd);
registroTr.appendChild(areaTd);
registroTr.appendChild(perfilTd);
registroTr.appendChild(grTeorTd);
registroTr.appendChild(vocTd);
registroTr.appendChild(respostaTd);
registroTr.appendChild(dataRespTd);
registroTr.appendChild(statusTd);

//acrescentando registro na tabela
var tabela = document.querySelector("#tabela-registro");

tabela.appendChild(registroTr);
});

segue html

<h2>Visualização Manifestações</h2>
            <label for="filtrar-tabela">Filtre:</label>
            <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do escopo">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Data Receb.</th>
                        <th>Data Reg.</th>
                        <th>Tipo</th>
                        <th>Origem</th>
                        <th>Rastreador</th>
                        <th>Escopo</th>
                        <th>Serviço Origem</th>
                        <th>Unidade</th>
                        <th>Área</th>
                        <th>Perfil</th>
                        <th>Grupo Teor</th>
                        <th>V. Cliente</th>
                        <th>Resposta</th>
                        <th>Data Resp.</th>
                        <th>Status</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody id="tabela-registro">

                </tbody>
            </table>
        </section>
2 respostas
solução!

Olá Ricardo, tudo bem com você?

Eu não entendi bem a pergunta, você quer apenas preencher, por exemplo o campo status da tabela?

Dessa maneira o ideal é deixar algumas classes css prontas, e adicionar dinamicamente na tabela, por exemplo:

<style>
        .finalizado {
            background-color: green;
            color: white;
            font-weight: bold;
        }

        .esperando {
            background-color: red;
            color: white;
            font-weight: bold;
        }
</style>

E dentro do javascript podemos adicionar essas classes nos elementos td que criamos, por exemplo:

if(status === "concluído"){
    statusTd.classList.add('finalizado');
} else {
    statusTd.classList.add('esperando');
}

Era isso que você pretendia fazer?

Abraços e Bons Estudos!

Oi Geovani,

obrigado pelo retorno! Continuei dando uma pesquisada acabei usando o setAttribute.

ficou assim:

if(form.resposta.value === '' ){
    statusTd.setAttribute("class", "stab");
}else{
    statusTd.setAttribute("class", "stcon");
}

e o css que fiz como teste

.stab {
    background-color: red;
}
.stcon {
    background-color: green;
}

Acho que deu no mesmo resultado final não?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software