如何在 Jquery 中添加诸如 Javascript 之类的元素 - 表格问题答案

【问题标题】：How add elements like Javascript in Jquery - Table Problems如何在 Jquery 中添加诸如 Javascript 之类的元素 - 表格问题
【发布时间】：2021-10-31 07:22:50
【问题描述】：

一切都很顺利，直到我遇到两个 jquery 问题，这是第二个问题。

我在一个函数内有这个 javascript 代码，它创建“tr”元素，然后通过 for 将它们添加到已经在 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);
}

现在我尝试将它传递给 Jquery，但我无法使其工作，我尝试执行以下逻辑，但我做不到

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

【问题讨论】：

试试这个解决方案：stackoverflow.com/a/1278557/8104777
您的选择器范围太广。 $("tr") 将选择表中的所有行。因此，请考虑调整为 $("tr:last")，例如，您只选择 1 行。
如果您尝试创建新元素，请使用var fila = $("<tr>"); 完成。您在帖子中将其用作选择器。

标签： javascript jquery methods html-table append

【解决方案1】：

感谢您的所有回复！他们帮助我找到了这个解决方案。

$("#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>`);

非常感谢你

【讨论】：

【解决方案2】：

考虑以下内容。

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

这会执行相同的循环，但会附加一个新行，然后将新单元格附加到该行。

查看更多：

【讨论】：

【解决方案3】：

一个可能的解决方案，感谢这个答案：@Neil：

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

【讨论】：