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

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

問題是，我的計算器只在同一個表格行.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>

uj5u.com熱心網友回復：

問題是因為您的代碼正在尋找 中每組元素的單個實體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>

標籤：javascript jQuery 阿贾克斯 jQuery-ui

上一篇：錯誤DOMException：無法在“元素”上執行“setAttribute”：“{{”不是有效的屬性名稱

下一篇：將共享列值的字典串列轉換為以鍵為列的pandas多索引資料框