1

Minha dúvida é a seguinte: eu tenho esse código onde ele alimenta uma tabela com 3 campos (valor da parcela, data de inicio, data do fim). Das minha inúmeras tentativas que não tive sucesso eu estou tentando por um while para fazer o preenchimento automático da tabela.

Ex: se eu por um valor = 200,00 com data de inicio = 17/04/2019 data de fim = 17/06/2019.

ele já preencha pelo while as datas e valores correspondentes na tabela... Alguém pode me ajudar com essa dúvida, creio que seja algo bobo mas como ainda estou começando vale cada ajuda como aprendizado! Obrigado.

function GerarTabela() {
    var valor = $("#txtParcela").val();
    var data1 = $("#datepicker1").val();
    var data2 = $("#datepicker2").val();
    var linha = document.createElement("tr");
    var campo_data = document.createElement("td");
    var campo_valor = document.createElement("td");
    var tabela = document.querySelector(".myBody");
    var rs = "R$ ";
    var valor_completo = `${rs} ${valor}`;

    var data_parcela = document.createTextNode(data1);
    var data_parcela2 = document.createTextNode(data2);
    var valor_parcela = document.createTextNode(valor_completo);

    if (valor == null || valor == "") {
        alert("Inserir valor da Parcela.");
    } else if (data1 == null || data1 == "") {
        alert("Inserir data primeiro dia.");

    } else if (data2 == null || data2 == "") {
        alert("Inserir data ultimo dia.");

    } else {
        while (data_parcela < data_parcela2) {
            campo_data.appendChild(data_parcela);
            campo_valor.appendChild(valor_parcela);
            linha.appendChild(campo_data);
            linha.appendChild(campo_valor);
            tabela.appendChild(linha);
            //condição que faça incrementar os meses até o ultimo mês.
        }
    }
};
2
  • Essa função .addMonth(1) é de onde?
    – Meu ovo
    17/04/2019 às 17:12
  • foi uma função que eu estava testando, mas não deu certo e esqueci de apagar essa linha. 17/04/2019 às 17:28

1 Resposta 1

1

Acho que você está fazendo uma mistura desnecessária de métodos JS e jQuery. Já que está usando jQuery, não precisa criar nós, basta inserir um template string com os valores usando .append().

Agora, para comparar as datas e ir incrementando os meses no laço while, use o objeto Date(), veja:

function GerarTabela() {
   var valor = $("#txtParcela").val();
   var data1 = $("#datepicker1").val();
   var data2 = $("#datepicker2").val();
   var tabela = $(".myBody");
   tabela.empty();
   var rs = "R$ ";
   var valor_completo = `${rs} ${valor}`;

   if (valor == null || valor == "") {
      alert("Inserir valor da Parcela.");
   } else if (data1 == null || data1 == "") {
      alert("Inserir data primeiro dia.");
   } else if (data2 == null || data2 == "") {
      alert("Inserir data ultimo dia.");
   } else {
      var d1_array = data1.split("/");
      var d2_array = data2.split("/");

      var data_ini = new Date(d1_array[0], d1_array[1]-1, d1_array[2]);
      var data_fim = new Date(d2_array[0], d2_array[1]-1, d2_array[2]);

      while (data_ini <= data_fim) {

         var dia = data_ini.getDate().toString();
         var mes = (data_ini.getMonth()+1).toString();

         var data = (dia.length == 1 ? "0"+dia : dia)
         + "/"
         + (mes.length == 1 ? "0"+mes : mes)
         + "/"
         + data_ini.getFullYear();

         tabela.append(`<tr><td>${data}</td><td>${valor_completo}</td></tr>`);
         data_ini.setMonth(data_ini.getMonth()+1);
      }
   }
}
.myBody td{
   border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Valor: <input type="text" id="txtParcela" value="200">
<br>
Data1: <input type="text" id="datepicker1" value="2019/04/17">
<br>
Data2: <input type="text" id="datepicker2" value="2019/06/17">
<br>
<button onClick="GerarTabela()">Gerar</button>
<br>
<table class="myBody"></table>

Só veja em que formato as datas são retornadas em:

var data1 = $("#datepicker1").val();
var data2 = $("#datepicker2").val();

No exemplo acima eu assumi o formato aaaa/mm/dd. Se for no formato dd/mm/aaaa terá que alterar a ordem nas linhas abaixo, colocando o índice [2] como primeiro argumento e o índice [0] no terceiro argumento do Date():

var data_ini = new Date(d1_array[0], d1_array[1], d1_array[2]);
var data_fim = new Date(d2_array[0], d2_array[1], d2_array[2]);

Para:

var data_ini = new Date(d1_array[2], d1_array[1], d1_array[0]);
var data_fim = new Date(d2_array[2], d2_array[1], d2_array[0]);
3
  • Incrível. Funcionou perfeitamente! Irei observar mais em relação a misturas de js e jQuery... Afinal a intenção do framework é facilitar o codigo js. Ainda estou estudando alguns livros e muita pesquisa na internet! Peço desculpas se cometi alguma gafe e fico muito agradecido pela ajuda e principalmente pelas dicas! Obrigado. 17/04/2019 às 17:59
  • Estou vendo o problema. Não coloque como resposta o problema que ocorreu, blz.
    – Meu ovo
    17/04/2019 às 18:31
  • O problema é que novembro só tem 30 dias, e vc colocou dia 31. O que fazer nesse caso?
    – Meu ovo
    17/04/2019 às 18:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .