Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Coleta de dados de uma tabela dinamica

por MARCOS ANTONIO PRIGOL ROSSONI
| 67.7k xp | 18 posts
DESENVOLVEDOR BACKEND

Boa tarde, eu estou fazendo um projetinho de uma calculadora de media de combustível, onde o usuário insere os dados solicitados na pagina em HTML, eu coleto eles pelo JS, faço os cálculos e devolvo na tabela que vai gerando as linhas de forma dinâmica, mas agora eu quero pegar esses dados que que estão sendo lançados nas linhas das tabelas, para por exemplo, trazer uma media geral de custo por KM, ou uma media geral de consumo por KM, eu ainda não consegui entender como vou coletar essas informações que estão sendo geradas, cada vez que gera uma nova linha na tabela.

Esse seria o código HTML ao qual coleto as Informações:

<body id="body">
    <div class="container">
        <h1 class="page-title">
            CALCULADORA MEDIA COMBUSTIVEL
        </h1>
        Selecione o tipo de Combustivel: 
        <select id="combustiveis">
            <option value="gasolina">Gasolina</option>
            <option value="etanol">Etanol</option>
            <option value="diesel">Diesel</option>
            <option value="dieselS10">DIesel S10</option>
        </select>
        <p class="quilometragem">Informe a Km Inicial</p>
        <input type="number" id="kmInicial" placeholder="Digite aqui"/><br>
        <p class="quilometragem">Informe a Km Final</p>
        <input type="number" id="kmFinal" placeholder="Digite aqui"/><br>
        <p class="litros">Informe a Quantidade de Litros</p>
        <input type="number" id="qtdLitros" placeholder="Digite aqui"/><br>
        <p class="valor">Informe o valor total gasto</p>
        <input type="number" id="valorTotal" placeholder="Digite aqui"/><br>
        <button type="submit" onclick="calcular()">CALCULAR</button>
    </div>
    <script src="app.js"></script>

    <div class="relatorio">
        <table id="tabela" border="1px" cellpadding="5px" cellspacing="0">
            <tr class="cabecalho">
                <td>Combustivel</td>
                <td>Km Inicial</td>
                <td>Km Final</td>
                <td>Qt Litros</td>
                <td>Valor/Lt</td>
                <td>Valor Total</td>
                <td>Km Rodados</td>
                <td>Media/Km</td>
                <td>Custo/Km</td>
            </tr> 
        </table>
    </div>

</body>

Esse seria o código JS:

function calcular() {
    let select = document.getElementById("combustiveis");
    let option = select.options[select.selectedIndex].text;
    let quantLitros = parseInt(document.getElementById("qtdLitros").value);
    let valorTotal = parseInt(document.getElementById("valorTotal").value);
    let valorUnit = (valorTotal / quantLitros).toFixed(2);
    let kmInicial = parseInt(document.getElementById("kmInicial").value);
    let kmFinal = parseInt(document.getElementById("kmFinal").value);
    let kmRodados = kmFinal - kmInicial;
    let mediaKm = kmRodados / quantLitros;
    let custoKm = (kmRodados / valorTotal).toFixed(2);


    let table = document.createElement('table');
    let tbody = document.createElement('tbody');

    table.appendChild(tbody);

    let linha2 = document.createElement('tr');
    let combustivel = document.createElement('td');
    combustivel.innerHTML = option;
    let inicialKm = document.createElement('td');
    inicialKm.innerHTML = kmInicial;
    let finalKm = document.createElement('td');
    finalKm.innerHTML = kmFinal
    let litrosQtd = document.createElement('td');
    litrosQtd.innerHTML = quantLitros
    let untValor = document.createElement('td');
    untValor.innerHTML = valorUnit;
    let totalValor = document.createElement('td');
    totalValor.innerHTML = valorTotal;
    let kmTotal = document.createElement('td');
    kmTotal.innerHTML = kmRodados;
    let kmMedia = document.createElement('td');
    kmMedia.innerHTML = mediaKm;
    let kmCusto = document.createElement('td');
    kmCusto.innerHTML = custoKm;

    linha2.appendChild(combustivel);
    linha2.appendChild(inicialKm);
    linha2.appendChild(finalKm);
    linha2.appendChild(litrosQtd);
    linha2.appendChild(untValor);
    linha2.appendChild(totalValor);
    linha2.appendChild(kmTotal);
    linha2.appendChild(kmMedia);
    linha2.appendChild(kmCusto);
    tbody.appendChild(linha2);


    document.getElementById('tabela').appendChild(tbody);
}
4 respostas
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Marcos, Beleza?

Bem interessante teu projeto, parabens!

Uma forma que pensei para armazenar teus numeros seria um array que iniciaria vazia e faria o push dos dados a cada vez que vc adicionasse a linha.

Depois fazemos um reduce para somar todos os valores da array e dividimos pelo total de itens que tem nessa array. Teremos a média.

Fiz as seguintes alterações:

No html

    <!-- logo abaixo do botao CALCULAR -->
    <button type="submit" id="btnMedia">CALCULAR MEDIA</button>

    <!-- logo abaixo do </table> -->
    <div id="mediaCustoPorKm"></div>

No js

// no inicio do arquivo
const custoPorKm = [];

// logo abaixo do document.getElementById("tabela").appendChild(tbody), dentro da função calcular
custoPorKm.push(Number(custoKm));

// no final do arquivo
document.querySelector("#btnMedia").addEventListener("click", (ev) => {
  const divMedia = document.querySelector("#mediaCustoPorKm");
  const total = custoPorKm.reduce((atual, acumulado) => atual + acumulado, 0);
  const resultado = total / custoPorKm.length;

  return (divMedia.innerHTML = resultado).toFixed(2).replace(".", ",");
});

Dá uma testada e ve se atende teu objetivo.

Abraço

por MARCOS ANTONIO PRIGOL ROSSONI
| 67.7k xp | 18 posts
DESENVOLVEDOR BACKEND

Opa, muito obrigado pelo feedback, me incentiva demais em continuar meus estudos.

Testei aqui, ele me retornou NaN, então resolvi testar o push para dentro da array, ele não esta add ela, tbm não sei se fiz certo, mas eu deixei ela para fora da function, e testei colocar dentro da function também não add, testei também deixar a var custoKm em escopo global, tbm não deu.

solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Marcos...

Coloquei o código no Github pra você dar uma olhada e comparar a forma que vc codou ai.

https://github.com/eraldosiniciof/forum-alura/tree/master/duvida19

Abs!

por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Inclusive Marcos.. acabei de pensar em uma forma de automatizar a criação da tabela...

Criei uma nova branch para que você consiga ter acesso aos dois códigos (ambos no app.js, ok?).

https://github.com/eraldosiniciof/forum-alura/tree/Refact01/duvida19

Resumindo... você tira aquela monte de innerHTML e linha2.appendChild e substitui por 

function criarTabela(...params) {
  const table = document.createElement("table");
  const tbody = document.createElement("tbody");

  table.appendChild(tbody);

  const trElement = document.createElement("tr");

  params.forEach((item) => {
    const tdElement = document.createElement("td");
    tdElement.innerHTML = item;
    trElement.appendChild(tdElement);
    tbody.appendChild(trElement);
    document.getElementById("tabela").appendChild(tbody);
  });
}

depois é só chamar a função dentro de calcular, passando os parâmetros que você quer mostrar na tabela.

  criarTabela(
    option,
    kmInicial,
    kmFinal,
    quantLitros,
    valorUnit,
    valorTotal,
    kmRodados,
    mediaKm,
    custoKm
  );

Depois dá uma olhada.

Abs.