dynamic table using $.each - table complete only on last record
kbwood.au steered me in the right direction yesterday. His help fixed my problem.
Now I am trying to expand my table to include a footer containing subTotal and Inventory Total. Once again only the last record of the set is shown. ie: $.each() is working fine but only the last record of the set contains the footer sub Total and Totals.
Here is my changed code showing the $.each() function and the results of the last three records of a set.
- function showTable(acctData) {
var xx=$('#inv').val(); // to check inv
var zz=$('#year').val(); // to show year
var headStr="<br /><br />Invoices for the Year "+zz;
var prev=""; var table_str="";
var sumCost=0.00; var sumTax=0.00; var totalInv=0.00
if(zz || (xx && zz)) {
$("#div1").append(headStr + "<p></p>"); // header to show year for invoices
}
$.each(acctData, function() { // get the invoice values
if(this['invNo']!=prev) {
table_str += "<table class='center' border='4' cellspacing='6' cellpadding='4' bgcolor='#fff99d' ><br/>";
table_str+="<caption> Invoice No. "+this['invNo']+" Dated "
+this['datepick']+" From "+this['vendor']+"</caption>";
table_str+="<thead><tr><th>Description</th><th>Cost</th><th>Tax</th></th></tr></thead>";
table_str+="<tbody>";
prev=this['invNo'];
sumCost=0.00; sumTax=0.00; sumInv=0.00; // zero out previous sums
} // this
sumCost+=parseFloat(this.cost); sumTax+=parseFloat(this.tax);
table_str+="<tr><td>"+this.description+"</td><td>"+this.cost+"</td><td>"+this.tax+"</td></tr>"; // table body
}); // each
sumInv=(sumCost+sumTax);
table_str+="</tbody>";
table_str+="<tfoot><tr><th scope='row'>Sub Total</th><td>"+sumCost+"</td><td>"+sumTax+"</td></tr>";
table_str+="<tr><th scope='row'>Invoice Total</th><td>"+sumInv.toFixed(2)+"</td></tr></tfoot>";
table_str+="</table>";
$("#div1").append(table_str + "<p></p>");
table_str=""; // re-sets table
} // showTable
Last three Invoices from set.