在更新行後計算總計

Question

我想計算所有行的總計，以便它顯示在我的表的底部。 我怎麼可以這樣使用JQuery 1.9

這裏是我的JS：

<script language="javascript"> 
$(".add_to_total").on('change', function() { 
var total = 0; 
$(".dynamic_row").each(function() { 
    var row = $(this); 

    var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0; 
    var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0; 

    var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0; 
    var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;   

    var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0; 
    var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;   

    var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0; 
    var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0; 

    total = ((Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm))); 
    row.find(".total").val(total); 
}); 
}); 
</script> 

這裏就是我有我的表：

<cfoutput> 
<form id="requestFrm" class="ui-body ui-body-d ui-corner-all" action="index.cfm?act=holiday_request_submit" method="post" data-ajax="false"> 

<table data-role="table" id="table-custom-2" class="ui-responsive"> 
     <thead> 
      <tr> 
       <th>Date</th> 
       <th>Start Time</th> 
       <th>End Time</th> 
       <th>&nbsp;</th> 
       <th>Start Time</th> 
       <th>End Time</th> 
       <th>Hour(s)</th>    
      </tr> 
     </thead> 
    <tbody> 
    <cfloop from="#dc_start_date#" to="#dc_end_date#" index="i"> 
     <tr class="dynamic_row"> 
     <td>#dateFormat(i)#</td> 
     <td> 
      <select name="start_hour_am" data-role="none" class="start_hour_am add_to_total"> 
       <option selected="true">0</option> 
       <option>08</option> 
       <option>09</option> 
       <option>10</option> 
       <option>11</option> 
       <option>12</option> 
       <option>13</option>        
      </select> 
      <select name="start_minute_am" data-role="none" class="start_minute_am add_to_total"> 
       <option>00</option>    
       <option value="0.5">30</option>  
      </select>  
     </td> 
     <td> 
      <select name="end_hour_am" data-role="none" class="end_hour_am add_to_total"> 
       <option selected="true">0</option> 
       <option>08</option> 
       <option>09</option> 
       <option>10</option> 
       <option>11</option> 
       <option>12</option> 
       <option>13</option>    
      </select> 
      <select name="end_minute_am" data-role="none" class="end_minute_am add_to_total"> 
       <option>00</option>    
       <option value="0.5">30</option>  
      </select>  
     </td> 
     <td style="background-color:##c0c0c0">&nbsp;</td> 
     <td> 
      <select name="start_hour_pm" data-role="none" class="start_hour_pm add_to_total"> 
       <option selected="true">0</option> 
       <option>13</option> 
       <option>14</option> 
       <option>15</option> 
       <option>16</option> 
       <option>17</option>        
      </select> 
      <select name="start_minute_pm" data-role="none" class="start_minute_pm add_to_total"> 
       <option>00</option>    
       <option value="0.5">30</option>  
      </select>  
     </td> 
     <td> 
      <select name="end_hour_pm" data-role="none" class="end_hour_pm add_to_total"> 
       <option selected="true">0</option> 
       <option>13</option> 
       <option>14</option> 
       <option>15</option> 
       <option>16</option> 
       <option>17</option>    
      </select> 
      <select name="end_minute_pm" data-role="none" class="end_minute_pm add_to_total"> 
       <option>00</option>    
       <option value="0.5">30</option>  
      </select>  
     </td> 
     <td> 
      <input type="text" class="total" data-role="none" value="0"> 
     </td>   
     </tr> 
    </cfloop> 
    <tr> 
     <td>Grand Total:<input type="text" class="grand_total" data-role="none" value="0"></td> 
    </tr> 
    </tbody> 
</table> 

<div style="float:right"> 
    <button type="submit" data-theme="e" data-mini="true" data-inline="true" name="submit" data-icon="check" value="submit-value">Submit</button> 
</div> 
</form> 
</cfoutput> 

我使用ColdFusion 9，JQuery的1.9和JQuery手機1.3.2。 任何幫助獲得更新後的總計工作將非常感激。

我想：

grand_total = grand_total + total; 

，但似乎沒有鈣。

千恩萬謝

JC

Answer 1

我已經想通了，需要更多記錯咖啡：

<script language="javascript"> 
$(".add_to_total").on('change', function() { 
    var total = 0; 
    var grand_total = 0; 
    $(".dynamic_row").each(function() { 
     var row = $(this); 

     var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0; 
     var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0; 

     var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0; 
     var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;   

     var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0; 
     var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;   

     var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0; 
     var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0; 

     total = ((Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm))); 
     row.find(".total").val(total); 
     grand_total = Number(grand_total) + Number(total); 

    }); 
     $("#grand_total").val(grand_total);   
}); 
</script>