在N个项目的列表中添加每个内部元素的总和

时间:2012-07-04 19:02:09

标签: jquery asp.net-mvc

所以我使用MVC来解析活动的XML文件并在页面上显示每个活动。每个活动都有自己的价格/成人和价格/儿童,用户可以根据他们提交的先前表格选择成人和儿童的数量。每项活动都有自己的总价。例如,跳伞是成人5美元和儿童1美元。假设我选择了4名成人和3名儿童,活动元素的总价格将显示为23美元。

我遇到的问题是如何使用jquery执行此操作,因为我可以接收N个活动。这是一个活动元素的样子(为简单起见,我明白了这一点)。

使用Razor的HTML

<li>
<div class="activity" id="@item.ActivityID"> <!--id="ACT001"-->

@Html.DropDownList(item.ActivityID+"-AdultNum", AdultNum, 
new { data_mini="true", data_inline="true" })<br /> <!--id="ACT001-AdultNum-->

Price/Adult C$:@Html.TextBox(item.ActivityID+"-AdultPrice", item.PricePerAdult, 
new { @readonly = "readonly"}) <!--id="ACT001-AdultPrice-->

@Html.DropDownList(item.ActivityID+"-ChildNum", ChildNum, 
new { data_mini="true",  data_inline="true" })<br /> <!--id="ACT001-ChildNum-->

Price/Child C$: @Html.TextBox(item.ActivityID+"-ChildPrice", item.PricePerChild, 
new { @readonly = "readonly"})

<input type="text" readonly="readonly" id="@item.ActivityID-Sum"/><!--id="ACT001-Sum"-->

</div>
</li>

由MVC制作的HTML

<li>
<div class="activity" id="ACT001">

<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select><br />

Price/Adult C$:<input id="ACT001-AdultPrice" name="ACT001-AdultPrice" 
               readonly="readonly" type="text" value="19.00" />

<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br /> 

Price/Child C$: <input id="ACT001-ChildPrice" name="ACT001-ChildPrice" 
                readonly="readonly" type="text" value="11.00" /> 

<input type="text" id="ACT001-Sum" readonly="readonly"/>

</div>
</li>

所以基本上我想要ACT001-Sum = ACT001-AdultNum * ACT001-AdultPrice + ACT001-ChildNum * ACT001-ChildPrice。然而,这只是一项活动,有N项活动。第二项活动将遵循ACT002-Sum,ACT002-AdultNum,ACT002-AdultPrice,ACT002-ChildNum的格式,第三项将有ACT003 ......等等。

我想知道如何在jquery中有一个基本函数来解决这个问题。我对这样的事情有一个粗略的想法,但还没有考虑过。我很感激这部分的帮助。

<script type="text/javascript">
    $('.activity').each(function() {
         var id = $(this).attr("id"); <!--take the "ACT001" part" -->
         var adultnum = id + "-AdultNum";
         var adultprice = id + "-AdultPrice";
         var childnum = id + "-ChildNum";
         var childprice = id + "-ChildPrice";

         $(#id+"-Sum").val(#adultnum.val() * #adultprice.val() + 
         #childnum.val() * #childprice());
    });
</script>

我很确定我的语法都错了,但我基本上想要获取每个活动的ID并附加-AdultNum,-AdultPrice,-ChildNum和-ChildPrice并找到总和。如果有更好的解决方案,我会乐意使用它。对不起,如果我正在做的事情根本没有任何意义。

2 个答案:

答案 0 :(得分:1)

我建议您首先组织价格与价格适用的组之间的关系,例如:class="numAdults" class="adultPrice"(类似于孩子的活动和价格),说你最终会得到以下内容:

<div class="activity" id="ACT001">

<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum" class="numAdults">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select><br />

Price/Adult C$:<input id="ACT001-AdultPrice" name="ACT001-AdultPrice" 
               readonly="readonly" type="text" value="19.00" class="adultPrice" />

<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum" class="numChildren">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br /> 

Price/Child C$: <input id="ACT001-ChildPrice" name="ACT001-ChildPrice" 
                readonly="readonly" type="text" value="11.00" class="childPrice" /> 

<input type="text" id="ACT001-Sum" readonly="readonly" class="total" />

</div>

使用该标记,活动的数量无关紧要,因为您可以使用其类名来定位相关元素,而不必使用id或其他方法;在这种情况下,以下情况应该有效(尽管目前未经测试):

var pI = parseInt; // lazy way to access parseInt
function sumActivities(){
    $('.activity').each(
        function(){
            var that = $(this),
                numAdults = pI(that.find('.numAdults').val(),10),
                adultPrice = pI(that.find('.adultPrice').val(),10),
                numChildren = pI(that.find('.numChildren').val(),10),
                childPrice = pI(that.find('.childPrice').val(),10),
                total = pI((numAdults * adultPrice) + (numChildren * childPrice),10);
            that.find('.total').val(total);
            console.log(numAdults,adultPrice,numChildren,childPrice);
        });
}

JS Fiddle demo

Updated JS Fiddle showing a second activity box

答案 1 :(得分:0)

<script type="text/javascript">
    $(document).ready(function () {
        //        $("#Heading_FeeAllocation").append("<br/><select id='SelectStatus' width='15%' align=left><option value=Paid>Paid</option><option value=Pending>Pending</option><option value=Extra>Extra</option></select>");       


        $("#submit").bind("click", function () {
            Loader.Show();
        });

        $("#Select_FeeAllocation").live("change", function () {
            var selectedshiftid = $("#Select_FeeAllocation option:selected").val();
            $.each($("#TableStudent tr"), function (index, item) {
                if ($(item).find(".SelectCustom_FeeAllocation").is(":checked")) {
                    $(item).find(".Custom_FeeAllocation").attr('value', selectedshiftid);
                }
            });
        });

    });

    $("input:checkbox").live("click", function () {
            if ($(this).is(":checked")) {
                $(this).attr("value", "True");
            } else {
                $(this).attr("value", "False");
            }
        });
        $("#Add_All_Record").bind("click", function () {
            if ($(this).attr("checked") == "checked") {
                $("input.Select_FeeAllocation").attr("checked", "checked");
                $("input.Select_FeeAllocation").attr("value", "True");
            } else {
                $("input.Select_FeeAllocation").removeAttr("checked");
                $("input.Select_FeeAllocation").attr("value", "False");
            }
        });



        $('.amount').blur(function () {
    var sum = 0;
    $('.amount').each(function() {

        if($(this).val()!="")
         {
            sum += parseFloat($(this).val());
         }

    });
        $("#grosstotal").val(sum);
});​​​​​​​​​






</script>

<div class ="Left">
        <div class="widgetbox">
        <h3>
            <span>Student List</span></h3>
            <div class="content">
            <table cellpadding="0" cellspacing="0" class="sTable3" width="100%">
                <colgroup>
                    <col class="head1" width="5%" />
                    <col class="head0" width="8%" />
                    <col class="head1" width="20%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="7%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="10%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="10%" />
                    <col class="head0" width="10%" />
                </colgroup>

                <tbody>

                    <tr>
                        <th align="center">
                            <input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
                                value="True" checked="checked">
                            Select All
                        </th>

                        @Html.Raw(ViewBag.Captions)

                        @*<th align="center" width="2%">
                            <input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
                                value="True" checked="checked" />
                            Select All
                        </th>*@
                        @*<th align="center" width="5%">
                            Admission No
                        </th>
                        <th align="center" width="10%">
                            Student Name
                        </th>*@
                        <th align="center" width="20%">
                            Academic Year
                        </th>
                        <th align="center" width="20%">
                            Fee Type Name
                        </th>
                        <th align="center" width="20%"> 
                            Period Name
                        </th>
                        <th align="center" width="20%">
                            Fee Category Name
                        </th>
                         <th align="center" width="20%">
                            Amount
                         </th>

                    </tr>

                </tbody>
            </table>
            <form method="post" action="#" class="form_class" novalidate="novalidate" enctype="multipart/form-data">
            <table id="TableStudent" cellspacing="0" cellpadding="0" border="1" class="sTable3"
                width="100%">
                <tbody class="TableData">
                @{
                    var count=0;
                    string Transferprefix = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
                    string strTransferprefix = "";
                    //string STUDENT_NAME = ViewBag.Name;
                    //string Admission_No = ViewBag.Admission;
                    foreach (var student1 in ViewBag.StudList)
                   {
                       strTransferprefix = String.Format(Transferprefix,count);
                        <tr rownumber="@count" >
                         <td align="center" width="2%">
                        <input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />  
                         <input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student1.Registration_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student1.Admission_No" />
                         </td>
                         </tr>



                    foreach (var student in ViewBag.FeesDetails)
                   {
                       //var count1 = 0;
                       //string Transferprefix1 = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
                       //string strTransferprefix1 = "";
                       strTransferprefix = String.Format(Transferprefix, count);
                        <tr rownumber="@count" >
                         <td align="center" width="2%">
                          @*<input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />
                                 <input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student.Registration_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student.Admission_No" />*@
                                <input type="hidden" name="@(strTransferprefix + "Fee_Master_Id")" id="@("Fee_Master_Id-" + count)" value="@student.Fee_Master_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Class_Id")" id="@("Class_Id-" + count)" value="@student.Class_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Academic_Year_Id")" id="@("Academic_Year_Id-" + count)" value="@student.Academic_Year_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Academic_Year_Name")" id="@("Academic_Year_Name-" + count)" value="@student.Academic_Year_Name" />
                                <input type="hidden" name="@(strTransferprefix + "Fee_Type_Name")" id="@("Fee_Type_Name-" + count)" value="@student.Fee_Type_Name"/>
                                <input type="hidden" name="@(strTransferprefix + "Period_Name")" id="@("Period_Name-" + count)" value="@student.Period_Name" />
                                <input type="hidden" name="@(strTransferprefix + "Fee_Category_Name")" id="@("Fee_Category_Name-" + count)" value="@student.Fee_Category_Name"/>
                                <input type="hidden" name="@(strTransferprefix + "Amount")" id="@("Amount-" + count)" value="@student.Amount" />
                                @*<input type="hidden" name="@(strTransferprefix + "grosstotal")" id="@("grosstotal-" + count)" value="@student.grosstotal" class= "Amount" />*@


                         </td>
                        @*<td align="center" width="5%">
                                @student.Admission_No
                            </td>
                            <td align="left" width="10%">
                                @student.STUDENT_NAME
                            </td>*@
                            <td align="left" width="20%">
                                @student.Academic_Year_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Fee_Type_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Period_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Fee_Category_Name
                            </td>
                            <td align="center" width="20%">
                                @student.Amount
                            </td>


                            @*<td align="left" width="8%">
                              <select name="@(strTransferprefix + "Attendance")" id="@("Attendance-" + count)" class="Custom_FeeAllocation" style = "width:104px;" rownumber = "@count">
                                   <option value="Paid">Paid</option>
                                   <option value="Pending">Pending</option>
                                   <option value="Extra">Extra</option>                                  
                                   </select>
                            </td>*@


                    </tr>
                    }
                   }
                   }



                </tbody>

                </table>

                 <br />
                 <span style="float:right">TOTAL FEES &nbsp &nbsp
                <input type="text" id="grosstotal" name="grosstotal" value="" class="Amount"/></span> 
                <div class="form_default" style="clear: both;">
                <button id="submit" type="submit" value="submit" class="showbutton">
                    SUBMIT
                </button>
                <button id="btnCancel" type="button" class="showbutton">
                    Cancel</button>

                  </div>
                </form> 


              </div>                              

            </div>  




            </div>


i want to sum the amount column, using jquery, i have list of different fees like, Tution fee, transport fee, foe which Amount is given, i want the total for all the fees in grosstotal text. Thanks