JS向表中添加行。行出现然后消失

时间:2017-03-02 16:28:19

标签: javascript html

我想在HTML表格中添加一些行,并使用JS循环向每行添加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);

  }
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您的按钮正在提交表单并刷新页面。将您的按钮从提交类型更改为类型按钮。

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