javascript - 计算一个静态输入字段和三个动态创建的输入 jQuery

Question

我在 jQuery 中遇到了一个复杂的问题。我想在 jQuery 中计算一个静态输入字段和三个动态计算字段的值。

这是用 HTML 创建的输入法

 <input type="text" required name="prodeyo_3[]" class="form-control"/>
 <input type="text" id="somaponyJer" required name="somapony_jer[]"/>

我只想获取 id=somaponyJer 的值。然后我想获取 jQuery 动态创建的输入的值。

      $(document).ready(function () {

        $(".addrowMushok18").click(function () {

            var n = ($('.row_append tr').length - 0) + 1;


            var tr = '<tr>\
                        <td>' + n + '</td>\
                        <td><input type="date" required name="transection_date[]" class="form-control"></td>\
                        <td><input type="text" required name="transection_details[]" class="form-control" /></td>\
                        <td><input type="text" required name="purchase_sales_statement[]" class="form-control" /></td>\
                        <td><input type="date" required name="purchase_sales_date[]" class="form-control" /></td>\
                        <td><input type="text" required id="newTreasuryDeposit" name="treasury_deposit[]" class="form-control" /></td>\
                        <td><input type="text" required id="newReyat" name="reyat_2[]" class="form-control" /></td>\
                        <td><input type="text" required id="newProdeyo" name="prodeyo_3[]" class="form-control" /></td>\
                        <td><input type="text" required id="newSomaponyJer" required name="somapony_jer[]" class="form-control" value/></td>\
                        <td><input type="text" required name="remarks[]" class="form-control" /></td>\
                        <td align="center"><span class="remove_row"><i class="fa fa-trash-o fa-2x text-danger" data-toggle="tooltip" data-placement="left" title="Delete!" ></i></span></td>\
                    </tr>';

          $(".row_append").append(tr);
         }); 
});     

从这个动态创建的输入字段中，我想获取 id="newTreasuryDeposit"、 id="newReyat"id="newSomaponyJer"的值

然后计算它们并插入到由JQuery创建的id="newSomaponyJer"中。

请帮忙。

Answer 1

你可以做这样的事情。请注意，我添加了您发布的 html 中缺少的按钮和表格，因此请根据您的 html 进行更改。对于计算部分，我刚刚将插入的数字添加在一起，也可以根据您的需要进行更改。

点击add按钮生成tr，用提到的id填充字段，点击calculate按钮。结果将显示在 id = newSomaponyJer 的字段中。

function calculateValue() {
  const $sj = document.querySelector('#somaponyJer');
  const $ntd = document.querySelector('#newTreasuryDeposit');
  const $nr = document.querySelector('#newReyat');
  const $nsj = document.querySelector('#newSomaponyJer');

  //do some calculation e.g. sum them
  const result = Number($sj.value) + Number($ntd.value) + Number($nr.value);
  $nsj.value = result;
}

$(document).ready(function () {

  $(".addrowMushok18").click(function () {
    var n = ($('.row_append tr').length - 0) + 1;
      var tr = '<tr>\
        <td>' + n + '</td>\
        <td><input type="date" required name="transection_date[]" class="form-control"></td>\
        <td><input type="text" required name="transection_details[]" class="form-control" /></td>\
        <td><input type="text" required name="purchase_sales_statement[]" class="form-control" /></td>\
        <td><input type="date" required name="purchase_sales_date[]" class="form-control" /></td>\
        <td><input type="text" required id="newTreasuryDeposit" name="treasury_deposit[]" class="form-control" /></td>\
        <td><input type="text" required id="newReyat" name="reyat_2[]" class="form-control" /></td>\
        <td><input type="text" required id="newProdeyo" name="prodeyo_3[]" class="form-control" /></td>\
        <td><input type="text" required id="newSomaponyJer" required name="somapony_jer[]" class="form-control" value/></td>\
        <td><input type="text" required name="remarks[]" class="form-control" /></td>\
        <td align="center"><span class="remove_row"><i class="fa fa-trash-o fa-2x text-danger" data-toggle="tooltip" data-placement="left" title="Delete!" ></i></span></td>\
      </tr>';
    $(".row_append").append(tr);
  });

  $('.calculate').click(calculateValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required name="prodeyo_3[]" class="form-control"/>
<input type="text" id="somaponyJer" required name="somapony_jer[]"/>
<button class="addrowMushok18">add</button>
<button class="calculate">calculate</button>
<table>
  <tr class="row_append"></tr>
<table>