百分比更改计算器无法多次工作

Question

我有一个百分比变化计算器，它正在正常工作。但是我需要每一行的计算器。我从一个表单元格中计算，并在另一个单元格中显示结果以进行排序。

问题是，我的计算器在同一个表行.trCalculate类中只能工作一次。我需要它很多次。最重要的是我需要在另一个表格单元格中得到结果。这可能吗？

table {
border-collapse: collapse;
font-family: arial;
}

th {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}

td {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}

input {
margin: 3px 0;
border: 1px solid #00f;
height: 32px;
padding-left: 7px;
font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
<tr>
<th>Calculator 01</th>
<th>Calculator 02</th>
<th>Calculator 01 Result</th>
<th>Calculator 02 Result</th>
</tr>
<tr class="trCalculate">
<td>
<input type="text" class="ChangeCalulator CalcFrom" value=""><br>
<input type="text" class="CalcTo ChangeCalulator" value="1000">
</td>
<td>
<h2 class="CalcResult"></h2>
</td>
<td>
<input type="text" class="ChangeCalulator CalcFrom" value=""></br>
<input type="text" class="CalcTo ChangeCalulator" value="2000">
</td>
<td>
<h2 class="CalcResult"></h2>
</td>
</tr>
</table>
<script>
$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
let formContainer = $(this).closest('.trCalculate')
var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
var second = Number($(formContainer).find('.CalcTo').val()); // = Current Price
var minus = second - first; // 2000 - 1000 = {1000 = minus}
var divide = (minus / first); // 1000 / 1000 = 1
var multiply = divide * 100; // 1 * 100 = 100%
$(formContainer).find('.CalcResult').val(Number(multiply).toFixed(2));
$(formContainer).find('.CalcResult').text(Number(multiply).toFixed(2));
});
</script>

Answer 1

问题是因为您的代码正在tr中查找每组元素的单个实例，即使有两个集合。

为了避免这个问题，您可以使用closest()获取父td而不是tr，然后使用next()获取其同级td来更新输出：

$(document).on("input change", ".change-calculator", e => {
let $td = $(e.currentTarget).closest('td');
let from = Number($td.find('.calc-from').val());
let to = Number($td.find('.calc-to').val());
let result = ((to - from) / from) * 100;
$td.next().find('.calc-result').text(result.toFixed(2));
});

table {
border-collapse: collapse;
font-family: arial;
}
th {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
td {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
input {
margin: 3px 0;
border: 1px solid #00f;
height: 32px;
padding-left: 7px;
font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
<tr>
<th>Calculator 01</th>
<th>Calculator 02</th>
<th>Calculator 01 Result</th>
<th>Calculator 02 Result</th>
</tr>
<tr>
<td>
<input type="text" class="change-calculator calc-from" value=""><br />
<input type="text" class="change-calculator calc-to" value="1000">
</td>
<td>
<h2 class="calc-result"></h2>
</td>
<td>
<input type="text" class="change-calculator calc-from" value=""><br />
<input type="text" class="change-calculator calc-to" value="2000">
</td>
<td>
<h2 class="calc-result"></h2>
</td>
</tr>
</table>