Bagaimana membuat form perulangan dan perhitungan otomatis dengan jquery

Bagaimanakah cara menangkap data perulangan array didalam tabel agar nantinya dapat dikalkulasi perhitungan otomatis.? Pada pertanyaan saya, banyaknya data dinamis tergantung dari database, lalu ingin menghitung subjumlah berdasarkan diskon, jmlah barang dan harganya. Untuk formnya sendiri saya tampilkan dalam bentuk modal memakai jquery. Disini saya menggunakan framework CI. Mohon pencerahannya.. Terima kasih Adapun kode view untuk jquery saya seperti ini.

$('#show_pemesanan').on('click','#pesan_po',function(){
            var kd_po       = $(this).data('kd_po');
            var tgl_pesan   = $(this).data('tgl_pesan');
            var unit        = $(this).data('unit');
            var ruangan     = $(this).data('ruangan');
            $.ajax({
                type:"GET",
                data:{
                    'kd_po':kd_po,'tgl_pesan':tgl_pesan,'unit':unit,'ruangan':ruangan
                },
                success:function(data){
                    $('#kd_po').text(kd_po);
                    $('#tgl_pesan').text(tgl_pesan);
                    $('#unit').text(unit);
                    $('#ruangan').text(ruangan);
                    $('#modal_detail').modal("show");
                    var data = data;
                }
            });//Ajax bagian atas
            $.ajax({
                type:"GET",
                dataType:"json",
                url : "<?php echo site_url('pemesanan/getdetail');?>",
                data:{'kd_po':kd_po},
                success:function(data){
                    var html = '';
                    var no=0;
                    for(let i=0; i<data.length; i++){
                        no++;
                        var id = +data[i].id_po_detail;
                        html += '<tr>'+
                                    '<td>'+no+'</td>'+
                                    '<td>'+data[i].kode_barang+'</td>'+
                                    '<td>'+data[i].nama_barang+'</td>'+
                                    '<td><input type="text" name="qty_po_'+i+'" id="qty_po_'+i+'" class="form-control" value='+data[i].qty_po+' readonly></td>'+
                                    '<td><select name="vendor_'+id+'" class="form-control select2" id="vendor_'+id+'" style="width:100%"><option value="">- - -</option></select></td>'+
                                    '<td><select name="merk_'+id+'" class="form-control select2" id="merk_'+id+'" style="width:100%"><option value="">- - -</option></select></td>'+
                                    '<td><input type="text" name="tipe_'+id+'" id="tipe_'+id+'" class="form-control"></td>'+
                                    '<td><input type="text" name="manufaktur_'+id+'" id="manufaktur_'+id+'" class="form-control"></td>'+
                                    '<td><input type="number" name="diskon_'+id+'" id="diskon_'+id+'" class="form-control" onkeypress="return hanyaAngka(event)" onkeyup="jumlahUang()" onclick="jumlahUang()" value="0"></td>'+
                                    '<td><input type="number" name="harga_'+id+'" id="harga_'+id+'" class="form-control" onkeypress="return hanyaAngka(event)" onkeyup="jumlahUang()" onclick="jumlahUang()" value="0"></td>'+
                                '</tr>';
                    }
                    html += '<tr>'+
                                '<th colspan="9" style="text-align:right">Sub Jumlah</th>'+
                                '<th><input name="sub_jum" id="sub_jum" readonly style="text-align:right" onkeypress="return hanyaAngka(event)"/></th>'+
                            '</tr>'+
                            '<tr>'+
                                '<th colspan="9" style="text-align:right">PPN</th>'+
                                '<th><input type="number" name="ppn" id="ppn" style="text-align:right" onkeypress="return hanyaAngka(event)"/></th>'+
                            '</tr>'+
                            '<tr>'+
                                '<th colspan="9" style="text-align:right">Jumlah Dibayar</th>'+
                                '<th><input name="total_all" id="total_all" readonly style="text-align:right" onkeypress="return hanyaAngka(event)"/></th>'+
                            '</tr>';
                    $('#show_detail').html(html);

                    for(let i=0; i<data.length; i++){
                        var id = +data[i].id_po_detail;
                        show_merk(id);
                    }
                    for(let i=0; i<data.length; i++){
                        var id = +data[i].id_po_detail;
                        show_vendor(id);
                    }
                    for(let i=0; i<data.length; i++){
                        var id = +data[i].id_po_detail;
                        jumlahUang(id);
                    }
                }

            });
        });
function jumlahUang(id){
        var qty = parseInt($('#qty_po_'+id+'').val());
        var disc = parseInt($('#diskon_'+id+'').val());
        var harga = parseInt($('#harga_'+id+'').val());
        var subtotal = qty*harga;
        console.log(subtotal);
        $('#sub_jum').val(subtotal);
    }

Untuk tampilannya seperti ini.

avatar rifkaaga
@rifkaaga

1 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban