Repeat rows from a table using Javascript

Question

My question is the following: I have this code where it feeds a table with 3 fields (portion value, start date, end date). From my numerous attempts I have not had success I am trying by a while to do the automatic filling of table.

Ex: if I put a value = 200.00 with start date = 17/04/2019 end date = 17/06/2019.

he already fill by while the dates and corresponding values in the table... Someone can help me with this doubt, I think it’s something silly but as I’m still getting worth every help as learning! Thank you.

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.
        }
    }
};

Answer 1

I think you’re making an unnecessary mix of JS and jQuery methods. Since you are using jQuery, you do not need to create nodes, just insert a string template using the values .append().

Now, to compare the dates and increase the months in the loop while, use the object Date(), see:

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>

Just see what format dates are returned in:

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

In the above example I assumed the format aaaa/mm/dd. If in format dd/mm/aaaa will have to change the order in the lines below by placing the index [2] as first argument and the index [0] in the third argument of 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]);

To:

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]);