通过输入另一个表的值来触发一个表

Question

我试图通过输入另一个表的值来触发一个表的计算。有两个表，第一个有输入选项卡，称为 Profit_rate，另一个应该计算成本 * currency_rate * Profit_rate（在另一个表中），但是，当我输入 Profit_rate 时它不起作用。

JavaScript

<script>
        window.onload = function() {

            $(".update_row_data").change(function() {
                var auto_array = {};
                action = $(this).closest('tr').data('action');
                form_data = $(this).closest('tr').find('input, select');
                var profitRate = Number($("#profit_rate").val());
                var myArray = $.map(form_data, function(element) {
                        auto_array[element.name] = element.value, profitRate;
                });

    console.log(myArray);
    var pprice = $(this).closest('tr').find('.pprice');

    pprice_val = Math.round(auto_array['cost'] * profitRate * auto_array['currency_rate'];
    
    if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
        pprice.val(pprice_val);
    }
    form_data = $(this).closest('tr').find('input,select').serialize();
            $.ajax({
                    data: {
                        action: action,
                        form_data: form_data,
                    },
                    url: 'update.php',
                    type: 'post',
                    beforeSend: function() {

                    },
                    success: function(data) {
                        if(data == 1){
                        }
                    }
                });
        });
        };

        </script>

html代码

<table>
<tr><td>
<input name="profit_rate" size="3" style="border-style:none" type="text" class="update_row_data     profit_rate" id="profit_rate" value="<?php echo $res['profit_rate'];?>">
</td></tr></table>

<table>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="<?php echo $res["cost"];?>"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="<?php echo $res["cost"];?>"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="<?php echo $res["pprice"] ;?>"></td></tr></table>

Answer 1

您需要获取 next 表以获取 tr 内的所有 inputs。在下面的代码中，我使用 each 循环迭代 trs 然后获取所需的输入值并计算它们并将它们添加到 @987654325 @。

演示代码：

var auto_array;
$(".profit_rate").change(function() {
  var myArray = []
  //find closest table->next table
  var elem = $(this).closest('table').next('table');
  var action = elem.find('tr').data('action');
  console.log(action)

  var profitRate = Number($("#profit_rate").val());
  //looping 
  elem.find('tr').each(function() {
    //get cost
    var cost = $(this).find('input[name=cost]').val();
    //get curency rate
    var currecy_rate = $(this).find('input[name=currency_rate]').val();
    //calculate profit
    var profit_total = Math.round(cost * profitRate * currecy_rate)
    $(this).find('input[name=pprice]').val(profit_total)
    //add to json object
    auto_array = {};
    auto_array["cost"] = cost;
    auto_array["currecy_rate"] = currecy_rate;
    auto_array["pprice"] = profit_total;
    myArray.push(auto_array) //push to array
  });
  console.log(myArray)
  //your ajax call 

});
//on change of cost
$(".cost").change(function() {
  var cost = $(this).val();// that value
  var currecy_rate = $(this).closest('tr').find(".currency_rate").val();
  var profitRate = Number($("#profit_rate").val());
  var profit_total = Math.round(cost * currecy_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total)
});
//onchange of currecncy value
$(".currency_rate").change(function() {
  var currency_rate = $(this).val();
  var cost = $(this).closest('tr').find(".cost").val();
  var profitRate = Number($("#profit_rate").val());
  var profit_total = Math.round(cost * currency_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input name="profit_rate" size="3" style="" type="text" class="update_row_data     profit_rate" id="profit_rate" value="">
    </td>
  </tr>
</table>

<table>
  <tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
    <td><input name="cost" type="text" class="update_row_data cost" id="cost" value="25"></td>
    <td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="25"></td>
    <td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
  </tr>
  <tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
    <td><input name="cost" type="text" class="update_row_data cost" id="cost" value="20"></td>
    <td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="20"></td>
    <td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
  </tr>
</table>