如何回圈這些計算以獲得最多10條記錄的輸出并以表格格式顯示它們？-有解無憂

我寫了一些代碼來計算某些值。我的問題有以下兩個部分：首先，我如何回圈計算以根據第一條記錄的結果獲得最多 10 條記錄，并將它們以表格格式顯示在網頁上？其次，costOne計算costTwo應僅適用于從輸入年份開始的記錄。我該如何設定這個條件？如您所見，在下面的示例中，我輸入了以下值：

輸入：

Amount: 1500
Input One: 10
Input Two: 5
Starting Year: 4
Percentage: 15

在下面的輸出示例中，成本 A 和成本 B 值計算了起始年份 4 或記錄編號 4，因為起始年份輸入值為 4。

代碼：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    function calculate() {
      //Inputs
      var amount = document.getElementById('amount').value;
      var inputOne = document.getElementById('inputOne').value;
      var inputTwo = document.getElementById('inputTwo').value;
      var years = document.getElementById('years').value;
      var percentage = document.getElementById('percentage').value;

      //Calculations
      var calcOne =  amount   ( amount *  inputOne / 100);
      var calcTwo =  amount   ( amount *  inputTwo / 100);
      var diff =  calcTwo -  calcOne;

      //Only apply these calculations on rows starting based on the 'year' input
      var costOne =  calcOne *  percentage / 100;
      var costTwo =  calcTwo *  percentage / 100;

      //Display/Print the output in a table format...
      console.log(calcOne);
      console.log(calcTwo);
      console.log(diff);
      console.log(costOne);
      console.log(costTwo);
    }
  </script>



</head>

<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 Two:</td>
      <td><input class="form-control" name="inputTwo" id="inputTwo" value="" type="number" /></td>
    </tr>
    <tr>
      <td>Starting Year:</td>
      <td><input class="form-control" name="years" id="years" value="" type="number" /></td>
    </tr>
    <tr>
      <td>Percentage</td>
      <td><input class="form-control" name="percentage" id="percentage" 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>
  <div id="info"></div>
</body>

</html>

期望的輸出（結果）：如何回圈這些計算以獲得最多 10 條記錄的輸出并以表格格式顯示它們？

年	第一個值	第二個值	區別	成本 A	成本 B
1	1650	1575	-75	0	0
2	1815	1733	-82	0	0
3	1997	1906年	-91	0	0
4	2197	2097	-100	330	315
5	2417	2307	-110	363	346
6	2659	2538	-121	399	381
7	2925	2792	-133	439	419

uj5u.com熱心網友回復：

請查看以下示例。

$(function() {
  function makeTable(props, data, target) {
    var table = $("<table>", props);
    var headers = ["Year", "First Value", "Second Value", "Difference", "Cost A", "Cost B"];
    // Alternate Option:
    // var headers = Object.keys(data[0]);
    var head = $("<thead>").appendTo(table);
    $("<tr>").appendTo(head);
    var body = $("<tbody>").appendTo(table);
    $.each(headers, function(i, h) {
      $("<th>", {
        scope: "col"
      }).html(h).appendTo($("tr", head));
    });

    $.each(data, function(i, r) {
      var row = $("<tr>").appendTo(body);
      $.each(r, function(j, c) {
        $("<td>").html(c).appendTo(row);
      });
    })

    if (target != undefined) {
      table.appendTo(target);
    } else {
      table.appendTo($("body"));
    }
  }

  function calculate(data) {
    // Initial Calculations
    var calcOne = Math.round(data.amount   (data.amount * data.inpOne / 100));
    var calcTwo = Math.round(data.amount   (data.amount * data.inpTwo / 100));
    var diff = calcTwo -  calcOne;
    var costOne = 0;
    var costTwo = 0;

    // Only apply these calculations on rows starting based on the 'year' input
    if (data.year >= parseInt($("#years").val())) {
      costOne = calcOne * data.perc / 100;
      costTwo = calcTwo * data.perc / 100;
    }

    // Return calulated values
    return {
      year: data.year,
      calcOne: calcOne,
      calcTwo: calcTwo,
      diff: diff,
      costOne: costOne,
      costTwo: costTwo
    }
  }

  $("#calculate").click(function() {
    // Build converted Input Object
    var inputs = {
      amount: parseInt($("#amount").val()),
      inpOne: parseInt($("#inputOne").val()),
      inpTwo: parseInt($("#inputTwo").val()),
      year: 1,
      perc: parseInt($("#percentage").val())
    };

    // Storage for calculations
    var rows = [];

    // Must run once to get inital calculations
    rows.push(calculate(inputs));

    // Create Loop to calculate based on new values
    for (var i = 2; i <= 10; i  ) {
      inputs.amount = rows[i - 2].calcOne;
      inputs.year = i;
      rows.push(calculate(inputs));
    }
    console.log(rows);

    // Clear out any old values
    $("#info").empty();

    // Build the table based on calculations
    makeTable({
      class: "table"
    }, rows, $("#info"));
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<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="10" type="number" /></td>
  </tr>
  <tr>
    <td>Input Two:</td>
    <td><input class="form-control" name="inputTwo" id="inputTwo" value="5" type="number" /></td>
  </tr>
  <tr>
    <td>Starting Year:</td>
    <td><input class="form-control" name="years" id="years" value="4" type="number" /></td>
  </tr>
  <tr>
    <td>Percentage</td>
    <td><input class="form-control" name="percentage" id="percentage" value="15" type="number" /></td>
  </tr>
  <tr>
    <td><input type="button" name="calculate" id="calculate" value="calculate" /></td>
    <td><input type="button" name="clear" id="clear" value="clear" /></td>
  </tr>
</table>
<div id="info"></div>

您可以看到我提供了一個 jQuery 解決方案。我不得不調整你的初始calculate()功能。它現在通過一個物件接受多個輸入并回傳一個新的計算物件。

根據前面的計算，我創建了一個執行 10 次計算的回圈。和每次都會更新amount。year

一旦我有了一個代表所有計算的物件陣列，我就可以創建一個資料表。這就是makeTable()函式幫助我們的地方。它將表屬性作為物件讀取，資料作為物件讀取，目標作為 jQuery 物件或 HTML 元素讀取。如果target定義為 no，則 Body 將是目標。

當用戶單擊按鈕時，將執行所有計算（從表單收集的詳細資訊，轉換為整數）并創建表。HTML 輸入資料始終是字串值，因此必須將其轉換為整數以確保正確的數學運算。

您可能需要考慮確認每個欄位都具有 a 值。例如，如果用戶沒有輸入一個值，或者錯過了一個值，它可能會拋出計算。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430904.html

標籤：javascript html jQuery jQuery-ui

上一篇：根據jquery中的第一個選擇id過濾選擇值

下一篇：掉出盒子的物品