亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果主輸入形式是(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 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號