我想使用 JS 循环向 HTML 表格添加多行,并在每行添加 9 个单元格。问题是我在 HTML 文档中短暂(几毫秒)看到了我想要的内容,但后来它被删除了。为什么会这样?这是带有 JS 循环和 HTML 的代码。
function calcular() {
var cantidad = Number(document.getElementById("cantidad").value);
var numAnos = Number(document.getElementById("numAnos").value);
var numMeses = Number(document.getElementById("numMeses").value);
var fecha = document.getElementById("fecha");
//Meses
var numFilas = numAnos * 12 + numMeses;
var table = document.getElementById("tablaDatos");
alert(Number(numFilas));
for (var i = 0; i < Number(numFilas); i++) {
alert(table.rows.length);
var newTR = table.insertRow(table.rows.length);
//var row = table1.insertRow(table1.rows.length);
//num cuota
var newTD0 = newTR.insertCell(0);
newTD0.innerHTML = i;
var newTD1 = newTR.insertCell(1);
var newTD2 = newTR.insertCell(2);
var newTD3 = newTR.insertCell(3);
var newTD4 = newTR.insertCell(4);
var newTD5 = newTR.insertCell(5);
var newTD6 = newTR.insertCell(6);
var newTD7 = newTR.insertCell(7);
var newTD8 = newTR.insertCell(8);
}
}
<form action="" name="formDatosInicio">
Cantidad: <input type="text" id="cantidad" name="cantidad"><br> Num años: <input type="text" id="numAnos" name="numAnos"><br> Num meses: <input type="text" id="numMeses" name="numMeses"><br> Fecha:
<input type="date" id="fecha" name="fecha"><br>
<input type="submit" value="Calcular" onclick="calcular()">
</form>
<table id="tablaDatos" name="tablaDatos" style="width:100%" style="text-align:center" align="center" border="1">
<tr>
<td>Numero cuota</td>
<td>Fecha emision</td>
<td>Saldo pendiente</td>
<td>Importe cuota</td>
<td>Amortizacion</td>
<td>Suma Amortizacion</td>
<td>Interes</td>
<td>Suma Interes</td>
<td>% Interes</td>
</tr>
</table>
最佳答案
您的按钮正在提交表单并正在刷新页面。将按钮从“提交”类型更改为“类型按钮”。
<input type="button" value="Calcular" onclick="calcular()">
关于javascript - JS 将行添加到表中。行出现然后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42560758/