如果主输入形式是（on.change），jQuery 会更改其他值

Question

我正在使用 Laravel 和 javascript + jQuery，然后，我需要的是，如果我单击选择选项值，它将根据（计数值）更改其他表单输入。这是我的预览图像：不，如果我单击“Tipe Biaya”列中选择选项的值，它将计算 jumlah 列*biaya 操作列，然后将结果放入总计列（在一行中）。这是我的 HTML 代码：<table class="table table-bordered table-responsive-md table-striped text-center">    <thead>    <tr>        <th class="text-center">Nama Cabang</th>        <th class="text-center">Jumlah</th>        <th class="text-center">Biaya Operasional</th>        <th class="text-center">Tipe Biaya</th>        <th class="text-center">Total</th>    </tr>    </thead>    <tbody  class="distributionList">        @foreach($branches as $key => $fb)            <tr>                <td class="pt-3-half text-left">                    {{ $fb->name }}                </td>                <td class="pt-3-half">                    <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">                </td>                <td class="pt-3-half">                    <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">                </td>                <td class="pt-3-half">                    <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">                        <option value="pecentage">Pecentage</option>                        <option value="flat">Number</option>                    </select>                </td>                <td class="pt-3-half">                    <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>                </td>            </tr>        @endforeach    </tbody></table>

Answer 1

您可以使用jumlah和biaya列的值$(this).closest("tr").find..，然后简单地使用.val()将结果添加到总列输入中。

演示代码：

$(document).ready(function() {

  var count = 0;

  //if you need on chnage of input as well(else remove that input[type=number]..)

  $(document).on("change input", ".operational_cost_type , input[type=number]", function() {

    event.preventDefault();

    var var_operational_cost_type = $(this).val();

    var selector = $(this).closest("tr")

    //get product quantity

    var product_quantity = selector.find('.product_quantity').val();

    var total_operational_cost = selector.find('.total_operational_cost')

    //get opertional cost

    var each_operational_cost = selector.find('.each_operational_cost').val();

    //mutliply and add total to total col

    total_operational_cost.val(product_quantity * each_operational_cost)

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-responsive-md table-striped text-center">

  <thead>

    <tr>

      <th class="text-center">Nama Cabang</th>

      <th class="text-center">Jumlah</th>

      <th class="text-center">Biaya Operasional</th>

      <th class="text-center">Tipe Biaya</th>

      <th class="text-center">Total</th>

    </tr>

  </thead>

  <tbody class="distributionList">

    <tr>

      <td class="pt-3-half text-left">

        something

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">

          <option value="pecentage">Pecentage</option>

          <option value="flat">Number</option>

        </select>

      </td>

      <td class="pt-3-half">

        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>

      </td>

    </tr>

    <tr>

      <td class="pt-3-half text-left">

        something1

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">

          <option value="pecentage">Pecentage</option>

          <option value="flat">Number</option>

        </select>

      </td>

      <td class="pt-3-half">

        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>

      </td>

    </tr>

    <tr>

      <td class="pt-3-half text-left">

        something2

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">

      </td>

      <td class="pt-3-half">

        <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">

          <option value="pecentage">Pecentage</option>

          <option value="flat">Number</option>

        </select>

      </td>

      <td class="pt-3-half">

        <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>

      </td>

    </tr>

  </tbody>

</table>