堆栈内存溢出
  繁体   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  1   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