堆棧內存溢出
  簡體   English   中英

根據從表中的選擇選項標簽中選擇的項目計算兩個輸入字段的總值

[英]Calculate Total value for two input fields based on items selected from a select option tag in table

 原文  2015-12-25 14:06:15  2   3    javascript/ jquery/ html5

問題描述

我想根據選擇的類型將“ 金額傳遞”的值傳遞給“ 借方金額”或“ 貸方金額 ”，如果選擇“ DR” ，則該值應傳遞給“ 借方金額” ，如果選擇了“ CR” ，則應將該值傳遞給“ 貸方”金額 。 如果選擇了多個類型選項，則應傳遞總金額 在此處輸入圖片說明

HTML 

<div>
       <label style="margin-bottom:3px;">Debit Amount</label><span>
        <input type="text" name="total_debit" id="totalDebit"/></span>
    </div>
    <div>
    <label>Credit Amount</label><span>
        <input type="text" name="total_credit" id="totalCredit" /></span>
    </div>
<table class="table-bordered table-hover">
    <thead>
      <tr>
            <th width="2%"><input id="check_all" type="checkbox"/></th>
            <th width="5%">Type</th>
            <th width="5%">Account Code</th>
            <th width="15%">Account Name</th>
            <th width="10%">Fund</th>
            <th width="10%">Amount</th>
     </tr>
   </thead>
   <tbody>
    <tr>
        <td><input class="case" type="checkbox"/></td>
        <td><select name="account_id[]" class="   mySelect" id="type_1">
                <option value="000"></option>
                <option value="1">DR</option>
                <option value="2">CR</option>
                </select>
        </td>
        <td>
         <input type="text" name="accountCode[]" id="accountCode_1">
       </td>
       <td>
          <input type="text" name="accountName[]" id="accountName_1"></td>
       <td>
          <select name="fund_id[]" >
            <option></option>
          </select>
       </td>
        <td>
            <input type="text"  name="amount[]" id="amount_1" class="totalLineAmount">
        </td>
        </tr>
        <tr>
        <td><input class="case" type="checkbox"/></td>
        <td><select name="account_id[]" class="   mySelect" id="type_2">
                <option value="000"></option>
                <option value="1">DR</option>
                <option value="2">CR</option>
                </select>
        </td>
        <td>
         <input type="text" name="accountCode[]" id="accountCode_2">
       </td>
       <td>
          <input type="text" name="accountName[]" id="accountName_2"></td>
       <td>
          <select name="fund_id[]" >
            <option></option>
          </select>
       </td>
        <td>
            <input type="text"  name="amount[]" id="amount_2" class="totalLineAmount">
        </td>
        </tr>
        <tr>
        <td><input class="case" type="checkbox"/></td>
        <td><select name="account_id[]" class="   mySelect" id="type_3">
                <option value="000"></option>
                <option value="1">DR</option>
                <option value="2">CR</option>
                </select>
        </td>
        <td>
         <input type="text" name="accountCode[]" id="accountCode_3">
       </td>
       <td>
          <input type="text" name="accountName[]" id="accountName_3"></td>
       <td>
          <select name="fund_id[]" >
            <option></option>
          </select>
       </td>
        <td>
            <input type="text"  name="amount[]" id="amount_3" class="totalLineAmount">
        </td>
        </tr>
        <tr>
        <td><input class="case" type="checkbox"/></td>
        <td><select name="account_id[]" class="   mySelect" id="type_4">
                <option value="000"></option>
                <option value="1">DR</option>
                <option value="2">CR</option>
                </select>
        </td>
        <td>
         <input type="text" name="accountCode[]" id="accountCode_4">
       </td>
       <td>
          <input type="text" name="accountName[]" id="accountName_4"></td>
       <td>
          <select name="fund_id[]" >
            <option></option>
          </select>
       </td>
        <td>
    <input type="text"  name="amount[]" id="amount_4" class="totalLineAmount">
        </td>
        </tr>
     </tbody>
</table>

jQuery腳本 

  <script>
$(function(){
  $(document).on("change",".mySelect",function(e){
    e.preventDefault();
    var _this=$(this);
    var id =_this.val();
    if ( id == 1) {
        calculateTotalDebit();
    }else if (id == 2) {
   calculateTotalCredit();
    }

function calculateTotalDebit(){
    total = 0;
    $('.totalLineAmount').each(function(){

        if($(this).val() != '' )total += parseFloat( $(this).val() );
        $('#totalDebit').val( total.toFixed(2) );
    });


}    

 function calculateTotalCredit(){
    total = 0;
    $('.totalLineAmount').each(function(){
        if($(this).val() != '' )total += parseFloat( $(this).val() );
    });

    $('#totalCredit').val( total.toFixed(2) );
    }   
  });

});
    </script>

3 個解決方案

解決方案1
 1 已采納  2015-12-25 15:11:42

$('.totalLineAmount')選擇所有金額輸入，因此無論DR / CR類型如何， calculateTotalDebit和calculateTotalCredit函數都會將它們全部相加。 您可以檢查函數內部的類型，例如， calculateTotalDebit ： 

function calculateTotalDebit(){
var total = 0;
$('.totalLineAmount').each(function(){
    var thisNumber = $(this).attr('id').slice(-1);
    // select the type of this amount
    var type = $('#type_' + thisNumber);
    // add only if the type is DR (val == 1)
    if($(this).val() != '' && type.val() == 1)total += parseFloat( $(this).val() );
    $('#totalDebit').val( total.toFixed(2) );
});


 $(function() { $(document).on("change", ".mySelect", function(e) { e.preventDefault(); var _this = $(this); var id = _this.val(); if (id == 1) { calculateTotalDebit(); } else if (id == 2) { calculateTotalCredit(); } function calculateTotalDebit() { total = 0; $('.totalLineAmount').each(function() { var thisNumber = $(this).attr('id').slice(-1); // select the type of this amount var type = $('#type_' + thisNumber); // add only if the type is DR (val == 1) if ($(this).val() != '' && type.val() == 1) total += parseFloat($(this).val()); $('#totalDebit').val(total.toFixed(2)); }); } function calculateTotalCredit() { total = 0; $('.totalLineAmount').each(function() { var thisNumber = $(this).attr('id').slice(-1); // select the type of this amount var type = $('#type_' + thisNumber); // add only if the type is CR (val == 2) if ($(this).val() != '' && type.val() == 2) total += parseFloat($(this).val()); }); $('#totalCredit').val(total.toFixed(2)); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label style="margin-bottom:3px;">Debit Amount</label><span> <input type="text" name="total_debit" id="totalDebit"/></span> </div> <div> <label>Credit Amount</label><span> <input type="text" name="total_credit" id="totalCredit" /></span> </div> <table class="table-bordered table-hover"> <thead> <tr> <th width="2%"> <input id="check_all" type="checkbox" /> </th> <th width="5%">Type</th> <th width="5%">Account Code</th> <th width="15%">Account Name</th> <th width="10%">Fund</th> <th width="10%">Amount</th> </tr> </thead> <tbody> <tr> <td> <input class="case" type="checkbox" /> </td> <td> <select name="account_id[]" class=" mySelect" id="type_1"> <option value="000"></option> <option value="1">DR</option> <option value="2">CR</option> </select> </td> <td> <input type="text" name="accountCode[]" id="accountCode_1"> </td> <td> <input type="text" name="accountName[]" id="accountName_1"> </td> <td> <select name="fund_id[]"> <option></option> </select> </td> <td> <input type="text" name="amount[]" id="amount_1" class="totalLineAmount"> </td> </tr> <tr> <td> <input class="case" type="checkbox" /> </td> <td> <select name="account_id[]" class=" mySelect" id="type_2"> <option value="000"></option> <option value="1">DR</option> <option value="2">CR</option> </select> </td> <td> <input type="text" name="accountCode[]" id="accountCode_2"> </td> <td> <input type="text" name="accountName[]" id="accountName_2"> </td> <td> <select name="fund_id[]"> <option></option> </select> </td> <td> <input type="text" name="amount[]" id="amount_2" class="totalLineAmount"> </td> </tr> <tr> <td> <input class="case" type="checkbox" /> </td> <td> <select name="account_id[]" class=" mySelect" id="type_3"> <option value="000"></option> <option value="1">DR</option> <option value="2">CR</option> </select> </td> <td> <input type="text" name="accountCode[]" id="accountCode_3"> </td> <td> <input type="text" name="accountName[]" id="accountName_3"> </td> <td> <select name="fund_id[]"> <option></option> </select> </td> <td> <input type="text" name="amount[]" id="amount_3" class="totalLineAmount"> </td> </tr> <tr> <td> <input class="case" type="checkbox" /> </td> <td> <select name="account_id[]" class=" mySelect" id="type_4"> <option value="000"></option> <option value="1">DR</option> <option value="2">CR</option> </select> </td> <td> <input type="text" name="accountCode[]" id="accountCode_4"> </td> <td> <input type="text" name="accountName[]" id="accountName_4"> </td> <td> <select name="fund_id[]"> <option></option> </select> </td> <td> <input type="text" name="amount[]" id="amount_4" class="totalLineAmount"> </td> </tr> </tbody> </table>

我猜您必須同時更新“借方金額”和“貸方金額”框，因此您必須每次都調用這兩個函數。 最好將兩個函數合並為一個calculateAmounts函數。 我還將事件偵聽器添加到.totalLineAmount框中，以自動更新總數。

解決方案2
 1  2015-12-25 16:27:59

嘗試使用以下代碼（ demo ）： 

$(function() {
  function calculateTotals() {
    var DRTotal = 0,
      CRTotal = 0;
    $('.totalLineAmount').each(function() {
      var $this = $(this),
        val = $this.val() || 0,
        type = $this.closest('tr').find('.mySelect').val();
      if (val && type === "1") {
        DRTotal += parseFloat(val);
      } else if (val && type === "2") {
        CRTotal += parseFloat(val);
      }
    });
    $('#totalDebit').val(DRTotal.toFixed(2));
    $('#totalCredit').val(CRTotal.toFixed(2));
  }

  $(document).on("change", ".mySelect, .totalLineAmount", function(e) {
    e.preventDefault();
    calculateTotals();
  });

});

解決方案3
 0  2015-12-25 14:20:36

我認為，您應該在每個輸入上添加事件監聽器，計算並在回調函數中將適當的數據放入總量中，例如 

$('.myInputClass').on('change', function() {
    // your code here..
    updateAmountField(amount);
});

function updateAmountField(amount) {
    $('.myTotalAmountInput').value(amount);
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 計算表中所選項目的總計 根據選項菜單中的選擇來驗證選擇輸入字段 根據選擇html標簽的所選選項顯示表格行 如何在輸入標記中顯示單個選擇選項中的每個選定值 獲取表中td內的select標簽的select選項值 如何基於選擇的選擇選項動態更改輸入值屬性？ 如何在一個 select 選項中獲取選定值，並在此基礎上，從 MySQL 表中獲取數據，以相同形式顯示另一個 select 選項 JSP-Javascript，基於選擇選項值更新表字段 如何使用Javascript從選擇字段中計算總計？ 從Webform上的2個輸入字段計算總時間
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM