How add elements like Javascript in Jquery - Table Problems

Question

everything was going well until I had two problems with jquery, and this is the second.

I have this javascript code, inside a function, that creates "tr" elements and then through a for it adds them to a table already created in html.

for(let i = 1; i <= plazos; i++) {

    pagosIntereses = parseFloat(valor*(tasas/100));
    pagoAmortizacion = pagoMensual - pagosIntereses;
    valor = parseFloat(valor-pagoAmortizacion);
    
    fechaX = hoy.setMonth(hoy.getMonth() + 1);
    //creacion de las filas
    const fila = document.createElement("tr");
    fila.innerHTML = 
    `   <td>${formatoFecha(fechaX)}
        <td class="valorCuota">${pagoMensual.toFixed(2)}</td>
        <td>${pagoAmortizacion.toFixed(2)}</td>
        <td>${pagosIntereses.toFixed(2)}</td>
        <td>${valor.toFixed(2)}</td>`;
    datosTabla.appendChild(fila);
}

Now I try to pass it to Jquery and I can't make it work, I tried to do the following which was what I logically came up with, but I couldn't

    const fila = $("tr").append(
        `<td>${formatoFecha(fechaX)}
        <td class="valorCuota">${pagoMensual.toFixed(2)}</td>
        <td>${pagoAmortizacion.toFixed(2)}</td>
        <td>${pagosIntereses.toFixed(2)}</td>
        <td>${valor.toFixed(2)}</td>`);
    datosTabla.appendChild(fila);

Try out this solution: https://stackoverflow.com/a/1278557/8104777 — Caleb George, Sep 01 '21 at 19:46
Your selector is too widely scoped. `$("tr")` will select all the Rows in the table. So consider adjusting to `$("tr:last")` for example ,where you select just 1 Row. — Twisty, Sep 01 '21 at 19:55
If you are trying to create a new element, this is done with `var fila = $("");`. You are using it as a Selector in your post. — Twisty, Sep 01 '21 at 20:02

score 0 · Answer 1 · answered Sep 01 '21 at 19:57

0

One possible solution, kudos to this answer: @Neil:

$("#datosTabla").find('tbody')
.append($('<tr>')
    .append($('<td>')
        .append(${formatoFecha(fechaX)})         
    )
   //etc...
);

answered Sep 01 '21 at 19:57

Caleb George

234
1
10

score 0 · Answer 2 · answered Sep 01 '21 at 20:07

Consider the following.

$.each(plazos, function(k, v) {
  pagosIntereses = parseFloat(valor * (tasas / 100));
  pagoAmortizacion = pagoMensual - pagosIntereses;
  valor = parseFloat(valor - pagoAmortizacion);
  fechaX = hoy.setMonth(hoy.getMonth() + 1);
  //creacion de las filas
  var fila = $("<tr>").appendTo(datosTabla);
  $("<td>").html(formatoFecha(fechaX)).appendTo(fila);
  $("<td>", {
    class: "valorCuota"
  }).html(pagoMensual.toFixed(2)).appendTo(fila);
  $("<td>").html(pagoAmortizacion.toFixed(2)).appendTo(fila);
  $("<td>").html(pagosIntereses.toFixed(2)).appendTo(fila);
  $("<td>").html(valor.toFixed(2)).appendTo(fila);
});

This performs the same Loop yet appends a new Row and then appends new Cells to that Row.

See More:

score 0 · Accepted Answer · answered Sep 01 '21 at 20:38

I appreciate all of your responses! They have helped me to reach this solution.

$("#tablaBody").append(`<tr><td>${formatoFecha(fechaX)}
        <td class="valorCuota">${pagoMensual.toFixed(2)}</td>
        <td>${pagoAmortizacion.toFixed(2)}</td>
        <td>${pagosIntereses.toFixed(2)}</td>
        <td>${valor.toFixed(2)}</td>`);

I thank you very much

How add elements like Javascript in Jquery - Table Problems

3 Answers3