jquery - 使用jquery计算现金opname形式

Question

现金 Opname 表格

<form action="" id="frm_cash_opname" name="frm_cash_opname" method="POST" class="form-horizontal">

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left">KERTAS</div>                            
        <div class="col-sm-2 text-right">100,000</div>                          
        <div class="col-sm-2">
            <input type="text" id="J1" name="J1" data-nilai="100000" class="form-control number" dir="rtl">
        </div>
        <div class="col-sm-2">
            <input type="text" id="T1" name="T1" value="0" class="form-control number" dir="rtl">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left">KERTAS</div>                            
        <div class="col-sm-2 text-right">50,000</div>                           
        <div class="col-sm-2">
            <input type="text" id="J2" name="J2" data-nilai="50000" class="form-control number" dir="rtl">
        </div>
        <div class="col-sm-2">
            <input type="text" id="T2" name="T2" value="0" class="form-control number" dir="rtl">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left"><b>TOTAL</b></div>                          
        <div class="col-sm-2 text-right"></div>                         
        <div class="col-sm-2 text-right"></div>                         
        <div class="col-sm-2 text-right">
            <input type="text" id="TOTAL" name="TOTAL" class="form-control number" dir="rtl" readonly="readonly">
        </div>                          
    </div>

</form>

我想根据这个要求进行计算:

sub_total = $( "input[name^='J']" ) * data-nilai )

每个小计中的输出，由 ID 标识:

$("input[name^='T']")

并计算所有行中的所有总计，总计总和:

 $( "input[name^='T']" ) )

并输出:

$( "input[name='TOTAL']" )

提前致谢，抱歉英语不好

Answer 1

您可以使用each()方法:

$('#calc').click(function(){
    var total = 0;

    $('form').find(".form-group:not(:last)").each(function(){
      var j_field = parseInt($("input[name^='J']", this).val());
      var j_field_nilai = parseInt($("input[name^='J']", this).data('nilai'));
      var sub_total = j_field*j_field_nilai;

      $("input[name^='T']", this).val(sub_total);
      total+= sub_total;
    })

    $( "input[name='TOTAL']" ).val(total);
})

希望这有帮助。

$('#calc').click(function(){
  var total = 0;

  $('form').find(".form-group:not(:last)").each(function(){
    var j_field = parseInt($("input[name^='J']", this).val());
    var j_field_nilai = parseInt($("input[name^='J']", this).data('nilai'));
    var sub_total = j_field*j_field_nilai;
    
    $("input[name^='T']", this).val(sub_total);
    total+= sub_total;
  })

  $( "input[name='TOTAL']" ).val(total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="frm_cash_opname" name="frm_cash_opname" method="POST" class="form-horizontal">

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left">KERTAS</div>                            
        <div class="col-sm-2 text-right">100,000</div>                          
        <div class="col-sm-2">
            <input type="text" id="J1" name="J1" data-nilai="100000" class="form-control number" dir="rtl">
        </div>
        <div class="col-sm-2">
            <input type="text" id="T1" name="T1" value="0" class="form-control number" dir="rtl">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left">KERTAS</div>                            
        <div class="col-sm-2 text-right">50,000</div>                           
        <div class="col-sm-2">
            <input type="text" id="J2" name="J2" data-nilai="50000" class="form-control number" dir="rtl">
        </div>
        <div class="col-sm-2">
            <input type="text" id="T2" name="T2" value="0" class="form-control number" dir="rtl">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-1 col-sm-offset-1 text-left"><b>TOTAL</b></div>                          
        <div class="col-sm-2 text-right"></div>                         
        <div class="col-sm-2 text-right"></div>                         
        <div class="col-sm-2 text-right">
            <input type="text" id="TOTAL" name="TOTAL" class="form-control number" dir="rtl" readonly="readonly">
        </div>                          
    </div>

</form>

<button id='calc'>Calculate</button>