You are viewing limited content. For full access, please sign in.

Question

Question

adding two total together from 2 tables

asked on November 20, 2015 Show version history

Hi, I am looking to add two totals together from two tables and place the value outside of the table into another field.  After using the code below, I keep getting the result NaN and not sure where to look.

.totala + .total = .totalc

 

$(document).ready(function () {
  var totalc;
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
      	$('.total input').attr('readonly', false);
        var hours = 0;
      	var rate = 0;
      	var ODC = 0;
      	var LC = 0;
      	var AO = 0;
      	var SGA = 0;
      	var Profit = 0;	
        var total = 0;
        var subtotal = 0;
      	      
        $('.cf-table-block tbody tr').each(function () {
            hour =  parseNumber($(this).find('.hours input').val()); 
            rate = parseNumber($(this).find('.rate input').val());
          	ODC = parseNumber($(this).find('.ODC input').val());
          	LC = parseNumber($(this).find('.LC input').val());
          	AO = parseNumber($(this).find('.AO input').val());
          	SGA = parseNumber($(this).find('.SGA input').val());
          	Profit = parseNumber($(this).find('.Profit input').val());
          	                     
            subtotal = (hour * rate)+ODC+LC+AO+SGA+Profit;
          	
            $(this).find('.total input').val(subtotal.toFixed(2));
            total += subtotal;
          	totalc += total;
        });
        $('.totalc input').val(totalc);
    }

    $('.cf-table-block').on('blur', 'input', sumtotala);
    function sumtotala() {
      	$('.totala input').attr('readonly', false);
        var quantity = 0;
      	var unitcost = 0;
      	var freight = 0;
      	var tax = 0;
        var totala = 0;
        var subtotala = 0;
      	      
        $('.cf-table-block tbody tr').each(function () {
            quantity =  parseNumber($(this).find('.quantity input').val()); 
            unitcost = parseNumber($(this).find('.unitcost input').val());
          	freight = parseNumber($(this).find('.freight input').val());
          	tax = parseNumber($(this).find('.tax input').val());
                	                     
            subtotala = (quantity * unitcost)+freight+tax;
          	
            $(this).find('.totala input').val(subtotala.toFixed(2));
            totala += subtotala;
          	totalc += totala;
        });
        $('.totalc input').val(totalc);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

 

0 0

Answer

SELECTED ANSWER
replied on November 20, 2015

I see 2 things that could be affecting your output:

  1. Initialize "totalc" to 0, or replace lines 29 an 54 above with "totalc = parseNumber($('.totalc input').val());"
  2. Give each of your tables a different CSS Class like ProductTable and MaterialsTable. Then add this to the selector string in each of your Event Handlers for the table summations. Right now, BOTH of your table summations run on all rows of both tables whenever any one of the tables is changed. If you gave the Product table a class of ProductTable, you could replace the selector on Line 34 with ".ProductTable.cf-table-block" and on Line 44 with ".ProductTable.cf-table-block tbody tr". You would have to do something similar with the other table and change lines 3 and 16.
1 0
replied on November 20, 2015

Thanks for the suggestion Scott, but after making the suggested changes my 2nd table function ceased to function.

 

$(document).ready(function () {
  
  var totalc = 0;
  
    $('.material.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
      	$('.total input').attr('readonly', false);
        var hours = 0;
      	var rate = 0;
      	var ODC = 0;
      	var LC = 0;
      	var AO = 0;
      	var SGA = 0;
      	var Profit = 0;	
        var total = 0;
        var subtotal = 0;
      	      
        $('.material.cf-table-block tbody tr').each(function () {
            hour =  parseNumber($(this).find('.hours input').val()); 
            rate = parseNumber($(this).find('.rate input').val());
          	ODC = parseNumber($(this).find('.ODC input').val());
          	LC = parseNumber($(this).find('.LC input').val());
          	AO = parseNumber($(this).find('.AO input').val());
          	SGA = parseNumber($(this).find('.SGA input').val());
          	Profit = parseNumber($(this).find('.Profit input').val());
          	                     
            subtotal = (hour * rate)+ODC+LC+AO+SGA+Profit;
          	
            $(this).find('.total input').val(subtotal.toFixed(2));
            total += subtotal;
			totalc += total;
        });
    $('.totalc input').val(totalc);
    }

    $('.product.cf-table-block').on('blur', 'input', sumtotala);
    function sumtotala() {
      	$('.totala input').attr('readonly', false);
        var quantity = 0;
      	var unitcost = 0;
      	var freight = 0;
      	var tax = 0;
        var totala = 0;
        var subtotala = 0;
      	      
        $('.product.cf-table-block tbody tr').each(function () {
            quantity =  parseNumber($(this).find('.quantity input').val()); 
            unitcost = parseNumber($(this).find('.unitcost input').val());
          	freight = parseNumber($(this).find('.freight input').val());
          	tax = parseNumber($(this).find('.tax input').val());
                	                     
            subtotala = (quantity * unitcost)+freight+tax;
          	
            $(this).find('.totala input').val(subtotala.toFixed(2));
            totala += subtotala;
          	totalc += totala;
        });
    $('.totalc input').val(totalc);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

 

0 0
replied on November 20, 2015

I don't see anything obvious in your code. Maybe double check your CSS class names? You could also turn on your developer tools and check the console for JS or CSS error messages.

0 0
replied on November 20, 2015

Thanks Scott, it turned out that my class name for the table was not matching with the class name in the java.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.