javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？-6ren

javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？

转载作者：行者123 更新时间：2023-11-30 00:20:17

我想对使用 ajax 生成的文本框的所有值求和。我有类名 adminhours 的文本框，这些文本框是使用 ajax 生成的。总和应显示在另一个文本框中，该文本框具有类 adminhours 的更改事件。总和应乘以管理费率文本框。请帮我。提前致谢。

HTML

<form action="" method="post">
<div class="timecardstepcontainer">
    <table class="widefat" style="width:100%" id="steponetable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email2(payment)</th>
                <th>Class Rate</th>
                <th>Admin Rate</th>
                <th>Week</th>
                <th>Status</th>
                <th>Comment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select name="txtuser" id="txtuser">
                    <option>--select--</option>
                                        <option value="2">nitinjohnson2000</option>

                    </select>
                </td>
                <td><input type="text" name="txtemail2" style="width:100%;" readonly=""></td>
                <td width="5%"><input type="text" name="txtclassrate" style="width:80px;" readonly=""></td>
                <td width="5%"><input type="text" name="txtadminrate" style="width:80px;" readonly=""></td>
                <td><!--<input type="text" name="txtweek" id="txtweek" />-->
                    <select name="txtweek" id="txtweek">
                        <option>--select--</option>
                                                <option>08-31-2015</option>
                                                <option>09-07-2015</option>
                                                <option>09-14-2015</option>
                                                <option>09-21-2015</option>
                                                <option>09-28-2015</option>
                                                <option>10-05-2015</option>
                                                <option>10-12-2015</option>
                                                <option>10-19-2015</option>
                                            </select>
                </td>
                <td><label id="txtstatus">Not Saved</label></td>
                <td><textarea name="txtcomment"></textarea></td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="timecardstepcontainer" id="steptwotable">
        <table class="widefat" style="width:100%">
            <thead>
                <tr>
                    <th>Session</th>
                    <th>Day of week</th>
                    <th>Date</th>
                    <th>Pre-Assigned</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Present</th>
                    <th>Late Arrival</th>
                    <th>Expense</th>
                    <th>Admin Hours</th>
                    <th>Comments</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Fall 2015 - Bethany Elementary Chess Program - Plano ISD</td>
                    <td>Wed</td>
                    <td>09-02-2015</td>
                    <td>Y</td>
                    <td>2015-09-09</td>
                    <td>2015-12-12</td>
                    <td><input type="checkbox" name="presentdays[]"></td>
                    <td><input type="checkbox" name="latedays[]"></td>
                    <td>5</td>
                    <td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
                    <td><input type="text" name="item_comment" style="width:80px;"></td>
                </tr>
                    <tr>
                        <td>Fall 2015 - Ashley Elementary Chess Program - Frisco ISD</td>
                        <td>Mon</td>
                        <td>08-31-2015</td>
                        <td>Y</td>
                        <td>2015-09-14</td>
                        <td>2015-12-12</td>
                        <td><input type="checkbox" name="presentdays[]"></td>
                        <td><input type="checkbox" name="latedays[]"></td>
                        <td>15</td><td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
                        <td><input type="text" name="item_comment" style="width:80px;"></td>
                    </tr>
                    <tr>
                        <td>Fall 2015 - Bledsoe Elementary Chess Program - Frisco ISD</td>
                        <td>Wed</td>
                        <td>09-02-2015</td>
                        <td>Y</td>
                        <td>2015-09-16</td>
                        <td>2015-12-12</td>
                        <td><input type="checkbox" name="presentdays[]"></td>
                        <td><input type="checkbox" name="latedays[]"></td>
                        <td>15</td>
                        <td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
                        <td><input type="text" name="item_comment" style="width:80px;"></td>
                    </tr>
                    <tr>
                        <td>Fall 2015 - Anderson Elementary Chess Program - Frisco ISD</td>
                        <td>Mon</td>
                        <td>08-31-2015</td>
                        <td>Y</td>
                        <td>2015-09-21</td>
                        <td>2015-12-12</td>
                        <td><input type="checkbox" name="presentdays[]"></td>
                        <td><input type="checkbox" name="latedays[]"></td>
                        <td>5</td>
                        <td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
                        <td><input type="text" name="item_comment" style="width:80px;"></td>
                    </tr>
                </tbody>
        </table>
    </div>
    <div class="timecardstepcontainer">
        <table class="widefat" style="width:100%" id="stepthreetable">
            <thead>
                <tr>
                    <th>Day</th>
                    <th>Classes $</th>
                    <th>Late $</th>
                    <th>Expense</th>
                    <th>Admin</th>
                    <th>Approved Adjustment</th>
                    <th>Approved Comment</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="number_of_classes" value="4" style="width:50px;" readonly=""></td>
                    <td><input type="text" name="totalclasses" value="40" readonly=""></td>
                    <td><input type="text" value="" id="latecharges" readonly=""></td>
                    <td><input type="text" name="totalexpense" value="40" readonly=""></td>
                    <td><input type="text" name="totaladminrate" value="0" readonly=""></td>
                    <td><input type="text" name="approved_adjustment" id="approved_adjustment" style="width:50px;"></td>
                    <td><textarea name="approver_comment"></textarea></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="timecardstepcontainer">
        <table class="widefat" style="width:100%">
            <tbody><tr>
                <td>Total</td>
                <td><input type="text" name="finaltotal" id="finaltotal" readonly=""></td>
                <td>Approved Total</td>
                <td><input type="text" name="approvedtotal" id="approvedtotal" readonly=""></td>
            </tr>
        </tbody></table>
    </div>
    <input type="hidden" name="alldata" id="alldata" value="16,15,17,14">
    <div class="timecardstepcontainer">
        <table>
            <tbody><tr>
                <td><input type="submit" name="addtimecard" value="Save" class="button button-primary button-large"></td>
            </tr>
        </tbody></table>
    </div>

</form>

Javascript

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("select[name='txtuser']").change(function(){
        jQuery.ajax({
            url:ajaxurl,
            type:'post',
            data:{action:'timecardapp_manage_timecard_stepone',user_id: jQuery("#txtuser").val()},
            success: function(response){    
                var data=JSON.parse(response);              
                jQuery("input[name='txtemail2']").val(data.email2);
                jQuery("input[name='txtclassrate']").val(data.class_rate);
                jQuery("input[name='txtadminrate']").val(data.admin_rate);
            }
        });
    });
    jQuery("#txtweek").change(function(){
        if(jQuery("select[name='txtuser'] option:selected").text()=='--select--'){          
            alert("Please select a user first to proceed");
            return false;
        } else {
            jQuery.ajax({
                url:ajaxurl,
                type:'post',
                data:{action:'timecardapp_manage_timecard_stepone',user_id: jQuery("#txtuser").val()},
                success: function(response){    
                    var data=JSON.parse(response);                  
                    var alldata = new Array();                  
                    var currentweek = jQuery("#txtweek option:selected").text();
                    var days_date = new Array();
                    function pad(str) {
                      return ("0"+str).slice(-2);
                    }
                    function getNextDay(str) { 
                      var parts = str.split("-");
                      var mon_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 0, 12, 0, 0, 0);
                      var tue_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 1, 12, 0, 0, 0);
                      var wed_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 2, 12, 0, 0, 0);
                      var thu_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 3, 12, 0, 0, 0);
                      var fri_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 4, 12, 0, 0, 0);
                      days_date[0] = ""+pad(mon_day.getMonth()+1)+"-"+ pad(mon_day.getDate())+"-"+mon_day.getFullYear();
                      days_date[1] = ""+pad(tue_day.getMonth()+1)+"-"+ pad(tue_day.getDate())+"-"+tue_day.getFullYear();
                      days_date[2] = ""+pad(wed_day.getMonth()+1)+"-"+ pad(wed_day.getDate())+"-"+wed_day.getFullYear();
                      days_date[3] = ""+pad(thu_day.getMonth()+1)+"-"+ pad(thu_day.getDate())+"-"+thu_day.getFullYear();
                      days_date[4] = ""+pad(fri_day.getMonth()+1)+"-"+ pad(fri_day.getDate())+"-"+fri_day.getFullYear();

                    }

                    var currentweek = jQuery("#txtweek option:selected").text(), // no values available
                    next_day = new Date(); // or some other default

                    if (currentweek && currentweek.indexOf("--") == -1) { // not the first
                      next_day=getNextDay(currentweek);
                    }

                    var trHTML = '';
                    var number_of_classes = 0;
                    var totalexpense = 0;
                    var totaladminhours = 0;

                    jQuery.each(data.final_data, function (i, item) {
                        if(item.event_title == 'Admin'){
                            //Monday
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>Mon</td>';
                            trHTML += '<td>'+days_date[0]+'</td>';
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            //Tuesday
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>Tue</td>';
                            trHTML += '<td>'+days_date[1]+'</td>';
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            //Wednesday
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>Wed</td>';
                            trHTML += '<td>'+days_date[2]+'</td>';
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            //Thursday
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>Thu</td>';
                            trHTML += '<td>'+days_date[3]+'</td>';
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            //Friday
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>Fri</td>';
                            trHTML += '<td>'+days_date[4]+'</td>';
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            alldata.push(item.session_id);

                        } else {
                            trHTML += '<tr>';
                            trHTML += '<td>'+item.event_title+'</td>';
                            trHTML += '<td>'+item.day_of_week+'</td>';
                            if(item.day_of_week=='Mon'){
                                trHTML += '<td>'+days_date[0]+'</td>';
                            }
                            if(item.day_of_week=='Tue'){
                                trHTML += '<td>'+days_date[1]+'</td>';
                            }
                            if(item.day_of_week=='Wed'){
                                trHTML += '<td>'+days_date[2]+'</td>';
                            }
                            if(item.day_of_week=='Thu'){
                                trHTML += '<td>'+days_date[3]+'</td>';
                            }
                            if(item.day_of_week=='Fri'){
                                trHTML += '<td>'+days_date[4]+'</td>';
                            }
                            trHTML += '<td>Y</td>';
                            trHTML += '<td>'+item.start_date+'</td>';
                            trHTML += '<td>'+item.end_date+'</td>';
                            trHTML += '<td><input type="checkbox" name="presentdays[]" /></td>';
                            trHTML += '<td><input type="checkbox" name="latedays[]" /></td>';
                            trHTML += '<td>'+item.expense_allowance_value+'</td>';
                            trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
                            trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
                            trHTML += '</tr>';

                            number_of_classes++;
                            totalexpense = +totalexpense + +item.expense_allowance_value;
                            totaladminhours = totaladminhours + item.hours_allowed;



                        }
                        alldata.push(item.session_id);
                    });

                    jQuery('#steptwotable').find('tbody').empty();
                    jQuery('#steptwotable').find('tbody').append(trHTML);

                    var totalclasses = number_of_classes * jQuery("input[name='txtclassrate']").val();
                    var totaladminrate = totaladminhours * jQuery("input[name='txtadminrate']").val();
                    var trHTML2 = '';
                    trHTML2 += '<tr>';
                    trHTML2 += '<td><input type="text" name="number_of_classes" value="'+number_of_classes+'" style="width:50px;" readonly /></td>';
                    trHTML2 += '<td><input type="text" name="totalclasses" value="'+totalclasses+'" readonly /></td>';
                    trHTML2 += '<td><input type="text" value="" id="latecharges" readonly /></td>';
                    trHTML2 += '<td><input type="text" name="totalexpense" value="'+totalexpense+'" readonly /></td>';
                    trHTML2 += '<td><input type="text" name="totaladminrate" value="'+totaladminrate+'" readonly /></td>';
                    trHTML2 += '<td><input type="text" name="approved_adjustment" id="approved_adjustment" style="width:50px;"  /></td>';
                    trHTML2 += '<td><textarea name="approver_comment"></textarea></td>';
                    trHTML2 += '</tr>';
                    jQuery('#stepthreetable').find('tbody').empty();
                    jQuery('#stepthreetable').find('tbody').append(trHTML2);
                    jQuery("#alldata").val(alldata);

                    var the_final_total = +totalclasses + +totalexpense - jQuery("#latecharges").val() + +totaladminrate;
                    jQuery("#finaltotal").val(the_final_total);
                }
            });
        }
    });

});
jQuery(document).on("keyup change", ".adminhours", function() { 
    var latecharge;
    var admincharge;
    var adminhours=jQuery(".adminhours");

    if(jQuery("#latecharges").val().length > 0){
        latecharge=jQuery("#latecharges").val();
    } else {
        latecharge=0;
    }

    if(jQuery("input[name='totaladminrate']").val().length > 0){
        admincharge=jQuery("input[name='totaladminrate']").val();
    } else {
        admincharge=0;
    }
    alert(adminhours.length);
    if(jQuery(".adminhours").val().length > 0){
        for(var i = 0; i < adminhours.length; i++){
            adminhours= +adminhours+ + +jQuery(adminhours[i]).val();        
        }
    } else {
        adminhours=0;
    }
    var thefinaltotal = +admincharge + +jQuery("input[name='totalclasses']").val() + +jQuery("input[name='totalexpense']").val() - latecharge;
    jQuery("input[name='totaladminrate']").val(adminhours*jQuery("input[name='txtadminrate']").val());
    jQuery("input[name='finaltotal']").val(thefinaltotal);
});
</script>

最佳答案

获取类 .adminhours 的所有元素的逻辑不应检查选择器 if(jQuery(".adminhours").val().length > 0) 中的 val。我已经在下面更新了您的代码:

var totalAdminhours = 0;
if(jQuery(".adminhours").length > 0){
        jQuery(".adminhours").each(function () {
            totalAdminhours += totalAdminhours + jQuery(this).val();        
        });
    } else {
        totalAdminhours = 0;
    }

关于javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33396942/

文章推荐： php - 如何根据特定领域进行搜索？

文章推荐： android - Multidex 仅在 AndroidTest 中不起作用

文章推荐： php - MYSQL php 如果不存在则选择不起作用

文章推荐： android - ListView 项目未显示

OCaml 求和
我正在尝试在 OCaml 中创建一个函数，该函数在数学中执行求和函数。我试过这个: sum n m f = if n = 0 then 0 else if n > m then f
excel - 求和/乘以相同名称附近的每个值
我正在尝试找到一个可以帮助我解决问题的公式。这个公式应该对每个靠近(总是在左边)具有相同名称的单元格的单元格求和(或工作)。如下所示: 将每个大写字母视为 “食谱”并且每个小写字母为 “成分” .在
python - 按日期范围计算变量的累积占用(求和)
让它成为以下 python pandas DataFrame，其中每一行代表一个人在酒店的住宿。 | entry_date | exit_date | days | other_columns
sql 对另一列中特定日期之前的调用次数进行计数/求和
我有显示客户来电的数据。我有客户号码、电话号码(1 个客户可以有多个)、每个语音调用的日期记录以及调用持续时间的列。表看起来如下示例。 CusID | PhoneNum | Date
python - 按日期范围计算变量的累积占用(求和)
让它成为以下 python pandas DataFrame，其中每一行代表一个人在酒店的住宿。 | entry_date | exit_date | days | other_columns
如果年份等于，Excel 求和
我得到了两列数据；答: 2013年12月31日 2013年12月30日 2013年12月29日 2013年12月28日 2013年12月27日 2012年12月26日 B: 10 10 10 10
C - double 求和
我对 double 格式的精度有疑问。示例: double K=0, L=0, M=0; scanf("%lf %lf %lf", &K, &L, &M); if((K+L) 我的测试输入: K
c# - 求和、减法和乘法数组
我有以下数组: int[,] myArray1 = new int[2, 3] { { 1, 2, 3 }, { 4, 6, 8 } }; int[,] myArray2 = new int[2, 3
mysql - 左连接和条件 where 求和
我需要有关报告查询的帮助。我在该方案的底部有一个发票表，需要一种方法来获取总计费金额，同时在此数据库方案中的较高点进行条件过滤。我需要加入其他表，这会导致 SUM 函数返回不需要的结果。这是我正在使
mysql - 求和/格查询的最佳索引策略
我有一个使用innodb作为存储引擎的MySQL数据库，并且我有许多采用基本形式的查询： SELECT bd.billing, SUM(CASE WHEN tc.transaction_class
mysql - 在mysql中使用case和limit对结果进行计数/求和
尝试创建一个查询来给出总胜、平和负。我有以下查询 SELECT CASE WHEN m.home_team = '192' AND m.home_full_time_score
MYSQL 双连接表和不准确的计数/求和
我正在尝试生成一份报告，显示排名靠前的推荐人以及他们推荐的人产生了多少收入。这是我的表格的缩写版本: Users Table ------------------ id referral_user_
mysql - 对查询中的多个 IF 求和
我有以下查询，并得到了预期的结果: SELECT IF (a1>b1,'1','0') AS a1r, IF (a2>b2,'1','0') AS a2r,
mysql - 任意字段分组/求和
我尝试了几种不同的解决方案，但都没有成功。我给出的表格是一个示例，其设计和功能与我实际使用的表格类似: PK | Color | Count -------------------
mysql 多重计数并与 WHERE 求和
我正在尝试构建一个查询来检查我的库存。 SELECT COUNT(*) AS item_count, reseller_id, sum(sold) as sold_count, sum(refunde
mysql - 对具有相同列值的值进行分组/求和
我试图解决一个看起来像下面编写的代码的问题，但由于缺乏知识和阅读 sqlalchemy 文档，我还没有真正找到解决问题的方法。目标: 如果 year_column 中的年份相同，则获取 sales_
MySQL - 求和，但前提是所有条件都满足
我有一个包含一周中多天的表格。一周中的每一天都有独特的属性，例如冰淇淋是否在这一天成功送达: ID DAY_WEEK ICE_CREAM 1 Monday
具有相同引用编号的 PHP 求和
首先，我有一个名为store_00的表 id | ref | item | qty | cost | sell 1 22 x1 5 10 15 2 22
c++ - MPI(求和)
我正在编写一个程序，计算每个数字的总和，直到 1000。例如，1+2+3+4+5....+100。首先，我将求和作业分配给 10 个处理器:处理器 0 得到 1-100，处理器 1 得到 101-20
python - 如何通过一次循环对多个对象属性求和(求和)？
我想在一个循环中一次对多个属性求和: class Some(object): def __init__(self, acounter, bcounter): self.acou

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？