根据从表

时间：2015-12-25 14:06:15

标签： javascript jquery html5

我想将金额的值传递给借记金额或贷记金额，基于类型如果选择 DR ，则选择该值，然后将值传递给借记金额，如果选择了 CR ，则该值应为至信贷金额。如果选择了多个类型选项，则应传递总金额 enter image description here

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 个答案:

答案 0 :(得分：1)

$('.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) );
});

＆＃13;
＆＃13; 
$(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));
    }
  });

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我猜你必须同时更新＆＃34;借记金额＆＃34;和＆＃34;信贷金额＆＃34;盒子，所以你每次都要调用这两个函数。将两个函数合并为一个calculateAmounts函数可能更好。我还会在.totalLineAmount框中添加事件监听器以自动更新总计。

答案 1 :(得分：1)

请尝试使用此代码（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();
  });

});

答案 2 :(得分：0)

在我看来，你应该在每个输入上添加事件监听器，计算并在你的回调函数中将适当的数据放入总量中，如

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

function updateAmountField(amount) {
    $('.myTotalAmountInput').value(amount);
}
相关问题
最新问题