我寫了一些代碼來計算某些值。我的問題有以下兩個部分：首先，我如何回圈計算以根據第一條記錄的結果獲得最多 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>期望的輸出（結果）：
| 年 | 第一個值 | 第二值 | 區別 | 成本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>You can see that I have offered a jQuery solution. I had to adjust your initial calculate() function. It now accepts a number of Inputs via an Object and returns a new Object of the calculations.
I created a loop that performs 10 calculations, based on the preceding calculations. The amount and the year get updated each time.
Once I have an Array of Objects that represent all the calculations, I can then create a Table of the Data. This is where the makeTable() function helps us. It reads the Table Properties as an Object, the Data as an Object, and the target as a jQuery Object or HTML Element. If no target is defined, the Body will be the target.
When the User clicks the button, all the calculations are performed (the details collected from the form, converted into Integers) and the table is created. HTML Input data is always a String value, so it must be cast as a Integer to ensure proper Math.
You may want to consider confirming that each field has the a value. For example if the User does not enter a value, or misses one, it can throw off the calculations.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/316749.html
標籤：javascript html 查询 jquery-ui
下一篇：掉到盒子外面的物品