Benötigt Hilfe - - Summe der Zeilen und Spalten einer Tabelle

Question

Die Antwort gefunden. Schauen Sie, wenn Sie interessiert sind.

Ich änderte meinen Ansatz zum Abschluss dieses Projekts.

muß in der Lage sein, Zeilen zu berechnen auf der rechten Seite auf „Total“ und die Spalten „Daily Totals“

Ich habe in der Lage gewesen, arbeiten einige davon zu bekommen, aber es ist mit den Berechnungen screwy und kann nicht richtig sein.

Grand total scheint zu funktionieren, aber die Summen scheinen ihre eigenen Zahlen zu bilden?

Ich denke, ein großes Problem ist die Art, wie ich die Klassen platziert habe? Könnte mit denen sein?

Das ist, was ich habe.

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> 

Und die Coldfusion/HTML: Dies ist, wo das ursprüngliche Problem war, und wurde durch gelöst.

 <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> 

Das Problem war, dass ich die Klasse „Calc“ auf den täglichen Summen hatte, und das war Haupt Berechnung Probleme zu verursachen. War so einfach wie das Hinzufügen einer Zeile .. Danke für Ihre Hilfe, wenn Sie es versucht haben.

Answer 1

Mein Zusatz erscheint kurz vor dem Schließen Ihres Key-Handlers.

$('.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); 
}); 

Genauer gesagt:

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

Mein Hauptproblem w/meine Lösung oben ist, dass ich Mühe hatte, um die Zeilen zu isolieren, die tatsächlich die Summen hatte. Ich habe die Klasse 'row25' hart codiert, um das DOM nach oben und dann nach unten und nach oben zu durchlaufen. Es wäre besser, wenn Sie der letzten Zeile (z. B. der Summenzeile) einen Klassennamen geben könnten.

Beispiel:

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

Wenn die obige Änderung für die TR gemacht wurde, die die Tagessummen hält, würde die Gesamtsumme Rechenzeile ändern:

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

Welche elegantere ist in meinem Meinung und wird weiter funktionieren, wenn Sie in Zukunft weitere Zeilen zu Ihrer Tabelle hinzufügen, die immer noch den von Ihnen gewählten Namenskonventionen entsprechen.