In need of help - - Total of rows and columns of a table

Question

Found the answer. Take a look if you're interested.

Changed my approach to completing this project.

Need to be able to calculate rows to "Total" on the right hand side and the columns to "Daily Totals"

I've been able to get some of it working, but it's screwy with the calculations and can't be right.

Grand total seems to be working, but the sums seem to be making up their own numbers?

I think a big issue is the way I've got the classes placed? Might be with those?

This is what I've got.

JS:

<script type="text/javascript" language="javascript">
 $(document).ready(function(){
  $('.date').mask("99/99/9999");
  $('.account').mask("99-9-999999-9999");
  /*calcuating the vertical and horizontal inputs*/
 $('.calc').change(function(){
  var classArray = $(this).attr('class').split(' ');

  //Personal gas expense
  $('.gasamount').sum("change", "#totals4");
  var num = $(this).attr("id").replace(/[A-Za-z$,-]/g, "");
  $('#gasmoney'+num).val(<cfoutput>#mileage#</cfoutput> * $(this).val());
  $('.gasmoney').sum("change", "#totals5");

  //////////////////////

  //Sum of each cell
  $.each(classArray, function(){
   $('.'+this).sum("change", ".ttl"+this);

  });

  //Finding the grandtotal
  var grandTotal = $('.row26').parent().children('td:last').children( 'input');
  var sum = $('.row25').parent().children('td').children('.calc').sum();
  grandTotal.val(Number(sum).toFixed(2));

 });
  /*bottom loop js*/
  $('.date-mask').mask("99/99/9999");
 });
</script>

And the ColdFusion/HTML:This is where the initial problem was, and was resolved through.

  <cfloop from="1" to="#ArrayLen(labels)#" index="r">
  <tr>
   <td class="labels"><cfif ArrayIsDefined(labels,r) AND labels[r] NEQ "Open">#labels[r]#</cfif></td>
   <cfloop from="1" to="7" index="i">
   <cfif labels[r] NEQ "Other: Describe">
    <td id="Day#i#" class="row#r# col#i#">
     <cfif r EQ 1>#Left(DayOfWeekAsString(i),3)#<cfelse><cfif r EQ 2>
     <input type="text" class="date-mask" /><cfelse>
     <input type="text" 
     <cfif labels[r] EQ "Personal Car: Mileage ##"> id="gasamount#i#" <cfelseif labels[r] EQ "Personal Car: Mileage $">id="gasmoney#i#" </cfif><cfif labels[r] EQ "Daily Totals">id="dailytotals#i#"</cfif>
      class="<cfif labels[r] EQ "Personal Car: Mileage ##">gasamount<cfelse><cfif labels[r] NEQ "Daily Totals">C#i#</cfif></cfif>
      <cfif labels[r] EQ "Personal Car: Mileage $">gasmoney<cfelse>calc R#r#</cfif>
      <cfif labels[r] EQ "Daily Totals">ttlC#i#</cfif>
"
       <cfif labels[r] EQ "Daily Totals" OR labels[r] EQ "Personal Car: Mileage $">readonly="readonly"</cfif>
        /></cfif>
        </cfif>
    </td>
   </cfif>     
   </cfloop>
   <cfif labels[r] NEQ "Other: Describe">
    <td class="totals"><cfif r EQ 1>Total<cfelse><input type="text" id="totals#r#" class="ttlR#r#" readonly="readonly" /></cfif></td>
   </cfif>
  </tr>
  </cfloop>

The problem was that I had the class "calc" on the daily totals, and that was causing major calculation problems. Was as simple as adding one line.. Thanks for your help if you tried.

Answer 1

My addition appears right before the close of your key handler.

   $('.calc').keyup(function(){
   var classArray = $(this).attr('class').split(' ');

   $.each(classArray, function(){
                $('.'+this).sum("keyup", ".ttl"+this);
                var grandTot = $('.ttl'+this).sum("keyup", ".gTtl");
                grandTot;
        });


   var grandTotal = $('.row25').parent().children('td:last').children( 'input');
   var sum = $('.row25').parent().children( 'td').children('.calc').sum();
   grandTotal.val( sum );
});

More specifically:

   var grandTotal = $('.row25').parent().children('td:last').children( 'input');
   var sum = $('.row25').parent().children( 'td').children('.calc').sum();
   grandTotal.val( sum );

My main issue w/ the my solution above is that I had trouble isolating the rows that actually had the totals. I hard coded the 'row25' class in order to traverse the DOM up and then over and down. It would be better if you could give the last row (e.g. the totals row) a class name.

Example:

<tr class="dailyTotals"> ....</tr>

If the above change was made for the TR that holds the daily totals, the grand total calculating line would change to:

var grandTotal = $('.dailyTotals').children('td:last').children( 'input');
var sum = $('.dailyTotals').children( 'td').children('.calc').sum();
grandTotal.val( sum );

Which is more elegant in my opinion and will continue to work if you add more rows to your table in the future that still adhere to the naming conventions you chose.