用javascript对类和id求和

时间:2019-01-27 17:24:20

标签: javascript php html

我试图对表中的输入求和。

我正在尝试汇总每周总计(星期一,星期四,星期三),并且还尝试在用户键入其工作时间时刷新页面时汇总每天的小时数(加班,公共假日)。如果用户更改了任何输入,则也必须更改总数。

我能够获取每周汇总的javascript,但是它不想计算每天的小时数,反之亦然。

这是我到目前为止尝试过的:

$(document).on("change", ".monday", function() {
    var sum = 0;
    $(".monday").each(function(){
        sum += +$(this).val();
    });
    $(".totaltimemonday").val(sum);
});

$(document).on("change", ".normaltime", function() {
    var sum = 0;
    $(".normaltime").each(function(){
        sum += +$(this).val();
    });
    $("normaltimetotal").val(sum);
});
<!-- This line is added to the snippet to allow it to access jQuery functions.
     It is not part of the original code. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-hover" id="timesheet_create" style="100%">
    <tr>
        <th>Description</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
        <th>Total</th>
    </tr>

    <tr>
        <th>Normal time</th>
        <td><input name="normal_monday" value="" onkeyup="calculateTotal()" class="monday text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_thus" value="" onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_wensn" value=""  onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_thu" value=""  onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_fri" value=""  onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_sat" value=""  onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normal_sun" value=""  onkeyup="calculateTotal()" class="normaltime text-center" type="text" size="2"  id="normaltime"></td>
        <td><input name="normaltimetotal" value="" onkeyup="calculateTotal()" class="normaltimetotal text-center" type="text" size="2" id="totaltime1"></td>
    </tr>


    <tr>
        <th>Weekly overtime hourly Rate x 1.5</th>
        <td><input name="weekly_monday" value=""  onkeyup="calculateTotal()" class="monday text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_thus" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_wenso" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_thu" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_fri" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_sat" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weekly_sun" value=""  onkeyup="calculateTotal()" class="weeklyovertime text-center" type="text" size="2"  id="weeklyovertime"></td>
        <td><input name="weeklyovertimetotal" value="" onkeyup="calculateTotal()" class="weeklyovertimetotal text-center" type="text" size="2" id="totaltime2" readonly></td>
    </tr>

    <tr>
        <th>Saturday overtime hourly Rate x 1.5</th>
        <td><input name="monday" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2" id="saterdayovertime"></td>
        <td><input name="thus" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="wens" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="thu" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="fri" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="saterday_sat" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="sun" value=""  onkeyup="calculateTotal()" class="saterdayovertime text-center" type="text" size="2"  id="saterdayovertime"></td>
        <td><input name="saterdayovertimetotal" value="" onkeyup="calculateTotal()" class="saterdayovertimetotal text-center" type="text" size="2" id="totaltime3" readonly></td>
    </tr>

    <tr>
        <th>Sunday time B hourly Rate x 1.0</th>
        <td><input name="monday" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="thus" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="wens" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="thu" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="fri" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="sat" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="sunb_sun" value=""  onkeyup="calculateTotal()" class="sundayovertimeb text-center" type="text" size="2" id="sundayovertimeb"></td>
        <td><input name="sundayovertimebtotal" value="" onkeyup="calculateTotal()" class="sundayovertimebtotal text-center" type="text" size="2" id="totaltime4" readonly></td>
    </tr>

    <tr>
        <th>Sunday overtime NB hourly Rate x 2.0</th>
        <td><input name="monday" value=""  onkeyup="calculateTotal()" class="monday text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="thus" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="wens" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="thu" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="fri" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="sat" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="sunnb_sun" value=""  onkeyup="calculateTotal()" class="sundayovertimenb text-center" type="text" size="2" id="sundayovertimenb"></td>
        <td><input name="sundayovertimenbtotal" value="" onkeyup="calculateTotal()" class="sundayovertimenbtotal text-center" type="text" size="2" id="totaltime5" readonly></td>
    </tr>

    <tr>
        <th>Public holiday time hourly Rate x 1.0</th>
        <td><input name="ph_monday" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="monday"></td>
        <td><input name="ph_thus" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="ph_wens" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="ph_thu" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="ph_fri" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="ph_sat" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="ph_sun" value=""  onkeyup="calculateTotal()" class="publicholidaytime text-center" type="text" size="2" id="publicholidaytime"></td>
        <td><input name="publicholidaytimetotal" value="" onkeyup="calculateTotal()" class="publicholidaytimetotal text-center" type="text" size="2" id="totaltime6" readonly></td>
    </tr>
    <tr>    
        <th>Public holiday overtime hourly Rate x 2</th>
        <td><input name="pho_monday" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="monday"></td>
        <td><input name="pho_thus" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="pho_wens" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="pho_thu" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="pho_fri" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="pho_sat" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="pho_sun" value=""  onkeyup="calculateTotal()" class="photime text-center" type="text" size="2" id="photime"></td>
        <td><input name="photimetotal" value="" onkeyup="calculateTotal()" class="photimetotal text-center" type="text" size="2" id="totaltime7" readonly></td>
    </tr>

    <tr>
        <th>Unpaid leave/Absent shifts</th>
        <td><input name="ul_monday" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="monday"></td>
        <td><input name="ul_thus" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="ul_wens" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="ul_thu" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="ul_fri" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="ul_sat" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="ul_sun" value=""  onkeyup="calculateTotal()" class="upaid text-center" type="text" size="2" id="upaid"></td>
        <td><input name="upaidtotal" value="" onkeyup="calculateTotal()" class="upaidtotal text-center" type="text" size="2" id="totaltime8" readonly></td>
    </tr>

    <tr>
        <th>Authorised short time Hours</th>
        <td><input name="ast_monday" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="monday"></td>
        <td><input name="ast_thus" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="ast_wens" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="ast_thu" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="ast_fri" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="ast_sat" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="ast_sun" value=""  onkeyup="calculateTotal()" class="AuthorisedShorttime text-center" type="text" size="2" id="AuthorisedShorttime"></td>
        <td><input name="AuthorisedShorttimetotal" value="" onkeyup="calculateTotal()" class="AuthorisedShorttimetotal text-center" type="text" size="2" id="totaltime9" readonly></td>
    </tr>

    <tr>
        <th>Non Authorised short time Hours</th>
        <td><input name="nast_monday" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="monday"></td>
        <td><input name="nast_thus" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nast_wens" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nast_thu" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nast_fri" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nast_sat" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nast_sun" value=""  onkeyup="calculateTotal()" class="nonAuthorisedShorttime text-center" type="text" size="2" id="nonAuthorisedShorttime"></td>
        <td><input name="nonAuthorisedShorttimetotal" value="" onkeyup="calculateTotal()" class="nonAuthorisedShorttimetotal text-center" type="text" size="2" id="totaltime10" readonly></td>
    </tr>

    <tr>
        <th>Study Leave Days</th>
        <td><input name="stl_monday" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="monday"></td>
        <td><input name="stl_thus" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="stl_wens" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="stl_thu" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="stl_fri" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="stl_sat" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="stl_sun" value=""  onkeyup="calculateTotal()" class="studyleave text-center" type="text" size="2" id="studyleave"></td>
        <td><input name="studyleavetotal" value="" onkeyup="calculateTotal()" class="studyleavetotal text-center" type="text" size="2" id="totaltime11" readonly></td>
    </tr>

    <tr>
        <th>Annual Leave Days</th>
        <td><input name="al_monday" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="monday"></td>
        <td><input name="al_thus" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="al_wens" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="al_thu" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="al_fri" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="al_sat" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="al_sun" value=""  onkeyup="calculateTotal()" class="annualleave text-center" type="text" size="2" id="annualleave"></td>
        <td><input name="annualleavetotal" value="" onkeyup="calculateTotal()" class="annualleavetotal text-center" type="text" size="2" id="totaltime12" readonly></td>
    </tr>

    <tr>
        <th>Sick Leave Days</th>
        <td><input name="sl_monday" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="monday"></td>
        <td><input name="sl_thus" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sl_wens" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sl_thu" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sl_fri" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sl_sat" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sl_sun" value=""  onkeyup="calculateTotal()" class="sickleave text-center" type="text" size="2" id="sickleave"></td>
        <td><input name="sickleavetotal" value="" onkeyup="calculateTotal()" class="sickleavetotal text-center" type="text" size="2" id="totaltime13" readonly></td>
    </tr>

    <tr>
        <th>Family Respon Leave Days</th>
        <td><input name="frl_monday" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="monday"></td>
        <td><input name="frl_thus" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="frl_wens" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="frl_thu" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="frl_fri" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="frl_sat" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="frl_sun" value=""  onkeyup="calculateTotal()" class="familyresponleave text-center" type="text" size="2" id="familyresponleave"></td>
        <td><input name="familyresponleavetotal" value="" onkeyup="calculateTotal()" class="familyresponleavetotal text-center" type="text" size="2" id="totaltime14" readonly></td>
    </tr>

    <tr>
        <th>Total:</th>
        <td><input name="total_mon" readonly value="" onblur="findTotals()" class="totaltimemonday text-center" id="totalmonday" type="text" size="2" ></td>
        <td><input name="total_thus" readonly value="" onblur="findTotals()" class="totaltimethus text-center" id="totalthus" type="text" size="2" ></td>
        <td><input name="total_wens" readonly value="" onblur="findTotals()" class="totaltimewens text-center" id="totalwens" type="text" size="2" ></td>
        <td><input name="total_thu" readonly value="" onblur="findTotals()" class="totaltimethu text-center" id="totalthu" type="text" size="2" ></td>
        <td><input name="total_fri" readonly value="" onblur="findTotals()" class="totaltimefri text-center" id="totalfri" type="text" size="2" ></td>
        <td><input name="total_sat" readonly value="" onblur="findTotals()" class="totaltimesat text-center" id="totalsat" type="text" size="2" ></td>
        <td><input name="total_sun" readonly value="" onblur="findTotals()" class="totaltimesun text-center" id="totalsun" type="text" size="2" ></td>
        <td><input name="totaltimetotal" readonly value="" class="totaltimetotal text-center" id="totaltimetotal" type="text" size="2" ></td>
    </tr>
</table>

0 个答案:

没有答案