Calculate sum of textboxes inside nested grid

问题

I have two nested grids in a GridView. Both nested grids have different number of controls (TextBoxes). I want to calculate sum of nested grid textboxes and put in a relevant textbox of relevant row parent grid.

I want to do this using jQuery.

Following is the source of grids:

<table cellspacing="0" rules="all" border="1" id="gvSPActivities" style="width:100%;border-collapse:collapse;">
    <tr class="donorh1" align="left" style="height:35px;">
        <th scope="col" style="width:40px;">#</th><th scope="col">Activity</th><th scope="col">Unit</th><th scope="col">Target</th><th scope="col">Benefic</th><th scope="col">Cost</th>
    </tr><tr class="gridrow2">
        <td>
                1
            </td><td>a</td><td>u1</td><td>
                <input name="gvSPActivities$ctl02$txtTarget" type="text" value="100" id="gvSPActivities_txtTarget_0" class="numeric" style="width:150px;" />
            </td><td>
                <a class="showDetails" href="javascript:switchViews('div1', 'one');">
                Show Details</a>
                <input name="gvSPActivities$ctl02$txtTotalBenefic" type="text" id="gvSPActivities_txtTotalBenefic_0" />
                <div class="details" id="div1" style="display: none;
                left: 30px;">
                <div>
            <table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvBenefic_0" style="border-collapse:collapse;">
                <tr>
                    <th scope="col">Male</th><th scope="col">Female</th><th scope="col">Children</th><th scope="col">Family</th>
                </tr><tr>
                    <td>
                        <input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtMaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtMaleBenefic_0" class="numeric" style="width:100px;" />
                        </td><td>
                        <input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFemaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFemaleBenefic_0" class="numeric" style="width:100px;" />
                        </td><td>
                        <input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtChildren" type="text" id="gvSPActivities_gvBenefic_0_txtChildren_0" class="numeric" style="width:100px;" />
                        </td><td>
                        <input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFamilyBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFamilyBenefic_0" class="numeric" style="width:100px;" />
                        </td>
                </tr>
            </table>
        </div>
                </div>
            </td><td>
                <a class="showDetails" href="javascript:switchViews('div1', 'one');">
                Show Details</a>
                <input name="gvSPActivities$ctl02$txtTotalCost" type="text" id="gvSPActivities_txtTotalCost_0" />
                <div class="details" id="div1" style="display: none;
                left: 30px;">
                <div>
            <table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvCost_0" style="border-collapse:collapse;">
                <tr>
                    <th scope="col">Main Cost</th><th scope="col">Other Cost</th>
                </tr><tr>
                    <td>
                        <input name="gvSPActivities$ctl02$gvCost$ctl02$txtMainCost" type="text" id="gvSPActivities_gvCost_0_txtMainCost_0" class="numeric" style="width:100px;" />
                        </td><td>
                        <input name="gvSPActivities$ctl02$gvCost$ctl02$txtOthercost" type="text" id="gvSPActivities_gvCost_0_txtOthercost_0" class="numeric" style="width:100px;" />
                        </td>
                </tr>
            </table>
        </div>
                </div>
            </td>
    </tr>
</table>

Thanks.

回答1:

var total = 0;

$("input[id^='gvSPActivities']", "#gvSPActivities").each(function() {
    total = total+this.value;
});

$(someInputElement).val(total);

来源：https://stackoverflow.com/questions/10520051/calculate-sum-of-textboxes-inside-nested-grid