Menghitung Total dan Subtotal dengan Jquery

Menghitung Total dan Subtotal dengan JQUERY - Perhitungan semacam ini biasanya terdapat pada kasus pembuatan invoice atau aplikasi point of sales (aplikasi penjualan) dimana terdapat produk yang memiliki harga dan jumlah harga yang dibeli, sehingga akan menghitung kalkulasi angka berupa penjumlahan harga dikali jumlah beli menjadi subtotal, dan subtotal di jumlahkan menjadi grandtotal atau total keseluruhan, berikut script untuk menghitung secara dinamis total dan subtotal dengan jquery:

Preview Hasil Akhir: Penjumlahan Total & Subtotal Dinamis:

Kode HTML untuk Membuat Layout Seperti Diatas:
<table id="penjualan" class="table table-responsive table-hover">
    <thead>
        <tr><th>Produk</th><th>Jumlah</th><th>Harga</th>
            <th align="center"><span id="amount" class="amount">Subtotal</span> </th></tr>
        </thead>
        <tfoot>
            <tr><td colspan="2"></td>
                <td align="right">
                    <h3><span id="total" class="total text-success">Grand Total</span></h3>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr><td>Baju</td>
                <td>
                    <select value="" name="qty" class="qty form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <input type="text" value="2500" class="price form-control" disabled="true">
                </td>
                <td align="center">
                    <h4><span id="amount" class="amount">Rp. 0</span></h4>
                </td>
            </tr>
            <tr><td>Sepatu</td>
                <td>
                    <select value="" name="qty" class="qty form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <input type="text" value="750" class="price form-control" disabled="true">
                </td>
                <td align="center">
                    <h4><span id="amount" class="amount">Rp. 0</span></h4>
                </td>
            </tr>

        </tbody>
        </table>
Kode Javascript untuk menghitung Harga * Jumlah Beli, dan Total Pembelian
        <SCRIPT>
            $(document).ready(function(){
                total();
                $('.qty').change(function() {
                    total();
                });
                $('.amount').change(function() {
                    total();
                });               
            });

            function total()
            {
                var sum = 0;
                $('#penjualan > tbody  > tr').each(function() {
                    var qty = $(this).find('option:selected').val();
                    var price = $(this).find('.price').val();
                    var amount = (qty*price)
                    sum+=amount;
                    $(this).find('.amount').text(''+amount);
                });
                $('.total').text(sum);
            }
        </SCRIPT>
 
Agar terlihat seperti hasil akhir diatas disini menggunakan bootsrap untuk tampilan tabelnya, dan untuk proses dari kode diatas adalah tabel yang dibuat memiliki id dengan nama #penjualan, kemudian untuk pemilihan jumlah beli memiliki class qty dan harga memiliki class price, dimana apabila qty berubah maka akan terjadi perubahan di subtotal dan grandtotal.
Mau Tanya ? Silahkan Klik Disini

0 comments