百分比變化計算器無法多次工作

Question

我有一個可以正常工作的百分比變化計算器。 但我需要每個表格行的計算器。 我正在從表格單元格計算並在另一個單元格中顯示結果以進行排序。

問題是，我的計算器只在同一個表行中工作一次.trCalculate class。 我需要它多次。 最重要的是我需要另一個表格單元格中的結果。 這可能嗎？

 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以更新 output：

 $(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>