計算嵌套網格內的文本框的總和

Question

我在GridView中有兩個嵌套網格。兩個嵌套網格具有不同數量的控件（TextBoxes）。我想計算嵌套網格文本框的總和，並放入相關行父網格的相關文本框中。

我想用jQuery來做到這一點。

以下是網格的來源：

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

感謝。

Answer 1

var total = 0; 

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

$(someInputElement).val(total);