时间戳

首页 > 解决方案 > 如何循环下面的计算以获取 15 条记录并将其显示在网页上？

jquery - 如何循环下面的计算以获取 15 条记录并将其显示在网页上？

问题描述

如何循环计算以根据第一条记录的结果获得最多 15 条记录，并以表格格式显示在网页上？

输入示例：

Amount: 1500
Input One: 10

所需的输出示例：

先生号 价值
1 1650
2 1815
3 1997
4 2197

脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function calculate() {
    //Inputs
    var amount = document.getElementById('amount').value;
    var inputOne = document.getElementById('inputOne').value;
    
    //Calculations
    var calcOne = +amount + (+amount * +inputOne/100);
    
    //Print the output in a table format...
     console.log(calcOne);
  }
    </script>

代码：

    <body>
    <table width="350" border="0">
    
      <tr>
        <td>Amount:</td>
        <td><input class="form-control" name="amount" id="amount" value="" type="number"/></td>
      </tr>
      <tr>
        <td>Input One:</td>
        <td><input class="form-control" name="inputOne" id="inputOne" value="" type="number"/></td>
      </tr>
      <tr>
    <td><input type="button" name="calculate" id="calculate" value="calculate" onClick="calculate()"/></td>
    <td><input type="button" name="clear" id="clear" value="clear" onClick="clear()"/></td>
     </tr>
    </table>
    </body>

标签： jquery

解决方案

这是脚本标记，它将创建一个新表并添加列（最多 15 个，正如您在问题中提到的那样），其值将添加到您的公式中。

 // inside script
    const table = document.getElementById('valueTable');

    function calculate() {
        //Inputs
        var amount = document.getElementById('amount').value;
        var inputOne = document.getElementById('inputOne').value;
        
        //Calculations
        let count = 1;
        let times = 15;
        let valueArray =[];

        for(i=0; i<times; i++){
            var calcOne = Math.ceil(+amount + (+amount * +inputOne/100));
            valueArray.push(calcOne);
            createColumn(calcOne, count++);
            amount = calcOne;
        }
    }

    function createColumn(calcOne, count){
        const srNo = document.createElement('TD');
        const value = document.createElement('TD');
        const tr = document.createElement('TR');

        table.appendChild(tr);
        tr.appendChild(srNo);
        tr.appendChild(value);

        srNo.innerHTML = count;
        value.innerHTML = calcOne;
    }
<table width="350" border="0">

  <tr>
    <td>Amount:</td>
    <td><input class="form-control" name="amount" id="amount" value="1500" type="number"/></td>
  </tr>
  <tr>
    <td>Input One:</td>
    <td><input class="form-control" name="inputOne" id="inputOne" value="15" type="number"/></td>
  </tr>
  <tr>
    <td>Input Two:</td>
    <td><input class="form-control" name="inputTwo" id="inputTwo" value="8" type="number"/></td>
  </tr>
  <tr>
    <td>Starting Year:</td>
    <td><input class="form-control" name="years" id="years" value="5" type="number"/></td>
  </tr>
  <tr>
    <td>Percentage</td>
    <td><input class="form-control" name="percentage" id="percentage" value="5" type="number"/></td>
  </tr>
  
  <tr>
    <td><input type="button" name="calculate" id="calculate" value="calculate" onClick="calculate()"/></td>
    <td><input type="button" name="clear" id="clear" value="clear" onClick="clear()"/></td>
  </tr>
</table>
<table id="valueTable" border="1" cellspacing="10" cellpadding="10">
    <tr>
        <th>Sr. No</th>
        <th>Value</th>
    </tr>
    
</table>

推荐阅读