jQuery invoice and HTML

Question

I am currently working on a dynamic invoice system for myself. But I can't seem to completely get it working correctly.

I have a invoice table like this in HTML:

Product name -- Quantity -- Tax -- Price (without tax) -- total price

My HTML looks like this:

I can add rows with this Javascript code:

And I calculate it with this jQuery code:

Although, its not exactly doing what I want. I want the total price to be at the end of the table row (total price disabled row)

And I want the tax to be added below the invoice (a new table), like this:

Sub total: (Total price without tax) TAX 10%: (The tax ammount according to the 10%) TAX 15%: (The tax ammount according to the 15%) Total: (Sub total price + the tax prices)

But the problem I get is once I have 2 items in the table, and I change the first row's TAX, it gets all messed up.

I am currently out of idea's how to correctly do this. So I all I need is once I filled 1 item row, the tax gets in the total table added, and once I change that tax in that row, it changes below aswell, and the price has to be changed aswell.

Can someone get me back on the right track?

Wesley Smith · Accepted Answer

It's not exactly clear what you want to display in the second table,however, I believe the below will suite your needs.

Here is a jsFiddle as well

$('#addRow').click(function () {
    addItem();
});
$('#items_table').on('keyup', '.update', function () {
    var key = event.keyCode || event.charCode; // if the user hit del or backspace, dont do anything
    if( key == 8 || key == 46 ) return false;
    calculateTotals();
});
$('#taxPercentage').change(function () {
    calculateTotals(); // user changed tax percentage, recalculate everything
});

function calculateTotals(){
    
    // get all of the various input typs from the rows 
    // each will be any array of elements
    var nameElements = $('.row-name');
    var quantityElements = $('.row-quantity');
    var taxElements = $('.row-tax');
    var priceElements = $('.row-price');
    var totalElements = $('.row-total');
    
    // get the bottom table elements
    var taxPercentageElement =$('#taxPercentage');
    var subTotalElement =$('#subTotal');
    var totalTaxElement =$('#totalTax');
    var grandTotalElement =$('#grandTotal');

    var subTotal=0;
    var taxTotal=0;
    var grandTotal=0;
    $(quantityElements).each(function(i,e){
        
        // get all the elements for the current row
        var nameElement = $('.row-name:eq(' + i + ')');
        var quantityElement = $('.row-quantity:eq(' + i + ')');
        var taxElement = $('.row-tax:eq(' + i + ')');
        var priceElement = $('.row-price:eq(' + i + ')');
        var totalElement = $('.row-total:eq(' + i + ')');

        // get the needed values from this row
        var qty = quantityElement.val().trim().replace(/[^0-9$.,]/g, ''); // filter out non digits like letters
            qty = qty == '' ? 0 : qty; // if blank default to 0
            quantityElement.val(qty); // set the value back, in case we had to remove soemthing
        var price = priceElement.val().trim().replace(/[^0-9$.,]/g, '');
            price = price == '' ? 0 : price; // if blank default to 0
            priceElement.val(price); // set the value back, in case we had to remove soemthing
    
        // get/set row tax and total
        // also add to our totals for later
        var rowPrice = (price * 1000) * qty
            subTotal = subTotal + rowPrice;
        var tax = taxPercentageElement.val() * rowPrice;
            taxElement.val((tax / 1000).toFixed(2));
            taxTotal = taxTotal + tax;
        var total =   rowPrice + tax
            totalElement.val((total / 1000).toFixed(2));
            grandTotal = grandTotal + total;
    });
    
    // set the bottom table values
    subTotalElement.val((subTotal / 1000).toFixed(2));   
    totalTaxElement.val((taxTotal / 1000).toFixed(2));  
    grandTotalElement.val((grandTotal / 1000).toFixed(2));   
}
function addItem() {
    var itemRow =
        '' +
        '' +
        '' +
        '' +
        '' +
        '' +
        '';
    $("#items_table").append(itemRow);
}
addItem(); //call function on load to add the first item

button{
    font-size:18px;
    
}
.myTable {
    background-color:#ffaa56;
}
.myTable {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.myTable tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.myTable tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.myTable tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}
.myTable tr:last-child td:first-child {
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}
.myTable tr:hover td {
}
#items_table tr:nth-child(odd) {
    background-color:#ffffff;
}
#items_table tr:nth-child(even) {
    background-color:#ffd0a3;
}
.myTable td {
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}
.myTable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.myTable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.myTable tr:last-child td:last-child {
    border-width:0px 0px 0px 0px;
}







    
        
            Item Name
            Quantity
            Tax
            Price
            Total
        
    
    
    
        
            Item Name
            Quantity
            Tax
            Price
            Total
        
    



    


    
        
            Tax Percentage
            Sub Total
            Total Tax
            Grand Total
        
    
    
        
        
        
            
                
            
            
            
        
        
    
    
    

        
        Add rows and give them values for quantity and price, the script will do the rest. 
        Select a diferent tax amount to recalculate everything

jQuery invoice and HTML

Answers (1)

Related Questions