JSテーブルに行を追加します。行が表示されてから消えます

Question

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>

Answer 1

あなたのボタンは、フォームを送信して、ページを更新しています。ボタンを型送信から型ボタンに変更します。

<input type="button" value="Calcular" onclick="calcular()">