为了账号安全,请及时绑定邮箱和手机立即绑定

如果主输入形式是(on.change),jQuery 会更改其他值

如果主输入形式是(on.change),jQuery 会更改其他值

绝地无双 2023-08-24 15:28:20
我正在使用 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>
查看完整描述

1 回答

?
叮当猫咪

TA贡献1776条经验 获得超12个赞

您可以使用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>


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 85 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信