如果主输入形式是（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() {&nbsp; var count = 0;&nbsp; //if you need on chnage of input as well(else remove that input[type=number]..)&nbsp; $(document).on("change input", ".operational_cost_type , input[type=number]", function() {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var var_operational_cost_type = $(this).val();&nbsp; &nbsp; var selector = $(this).closest("tr")&nbsp; &nbsp; //get product quantity&nbsp; &nbsp; var product_quantity = selector.find('.product_quantity').val();&nbsp; &nbsp; var total_operational_cost = selector.find('.total_operational_cost')&nbsp; &nbsp; //get opertional cost&nbsp; &nbsp; var each_operational_cost = selector.find('.each_operational_cost').val();&nbsp; &nbsp; //mutliply and add total to total col&nbsp; &nbsp; total_operational_cost.val(product_quantity * each_operational_cost)&nbsp; });});<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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th class="text-center">Nama Cabang</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Jumlah</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Biaya Operasional</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Tipe Biaya</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Total</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody class="distributionList">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="pt-3-half text-left">&nbsp; &nbsp; &nbsp; &nbsp; something&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="pecentage">Pecentage</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="flat">Number</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="pt-3-half text-left">&nbsp; &nbsp; &nbsp; &nbsp; something1&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="pecentage">Pecentage</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="flat">Number</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="pt-3-half text-left">&nbsp; &nbsp; &nbsp; &nbsp; something2&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="pecentage">Pecentage</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="flat">Number</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="pt-3-half">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>