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

更新行后计算总计

1 个答案: