如何循环这些计算以获得最多 10 条记录的输出并以 table 格式显示它们？
How to loop these calculations to get an output for up to 10 records and display them in a table format?
我写了一些代码来计算某些值。我的问题分为以下两个部分：首先，如何循环计算以根据第一条记录的结果获得最多 10 条记录，并以 table 格式将它们显示在网页上？其次，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>
期望的输出（结果）：
Year
First Value
Second Value
Difference
Cost A
Cost 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
请查看以下示例。
$(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() 功能。它现在通过一个对象和 returns 一个新的计算对象接受大量输入。
基于前面的计算，我创建了一个执行 10 次计算的循环。 amount 和 year 每次都会更新。
一旦我有了一个代表所有计算的对象数组，我就可以创建一个 Table 数据。这是 makeTable() 函数帮助我们的地方。它读取 Table 属性作为对象，数据作为对象，目标作为 jQuery 对象或 HTML 元素。如果没有定义 target，Body 将是目标。
当用户单击按钮时，将执行所有计算（从表单收集的详细信息，转换为整数）并创建 table。 HTML 输入数据始终是字符串值，因此必须将其转换为整数以确保正确的数学运算。
您可能需要考虑确认每个字段都有一个值。例如，如果用户没有输入一个值，或者遗漏了一个值，它就会放弃计算。
我写了一些代码来计算某些值。我的问题分为以下两个部分：首先，如何循环计算以根据第一条记录的结果获得最多 10 条记录，并以 table 格式将它们显示在网页上？其次，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>
期望的输出（结果）：
| Year | First Value | Second Value | Difference | Cost A | Cost 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 |
请查看以下示例。
$(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() 功能。它现在通过一个对象和 returns 一个新的计算对象接受大量输入。
基于前面的计算，我创建了一个执行 10 次计算的循环。 amount 和 year 每次都会更新。
一旦我有了一个代表所有计算的对象数组，我就可以创建一个 Table 数据。这是 makeTable() 函数帮助我们的地方。它读取 Table 属性作为对象，数据作为对象，目标作为 jQuery 对象或 HTML 元素。如果没有定义 target，Body 将是目标。
当用户单击按钮时，将执行所有计算（从表单收集的详细信息，转换为整数）并创建 table。 HTML 输入数据始终是字符串值，因此必须将其转换为整数以确保正确的数学运算。
您可能需要考虑确认每个字段都有一个值。例如，如果用户没有输入一个值，或者遗漏了一个值，它就会放弃计算。