I have created a table using HTML. The table consists of a header and then many rows called Family. Each Family row can have many rows representing individual member of the family (see code below).

    <table width ="100%" class="gridtable">
         <tr>
             <th>Family Name</th>
             <th>Address</th>
             <th>Age Total</th>
        </tr>
         <apex:repeat value="{!Families}" var="Families">
              <apex:repeat value="{!Families}" var="Family">
                  <tr>
                    <td>{!Family.familyName__c}</td>
                    <td>{!Family.address__c</td>
                    <td>
                        <div id="{!Family.id}">
                              <apex:outputText id="RollUp" value="{0,number,#,###,###,###,###,##0.00}">
                                    <apex:param value="{!Family.AgeTotal}"/>
                              </apex:outputText>
                         </div>
                   </td>
               </tr>
                   <apex:repeat value="{!Family.member}" var="line">
                        <td>{!line.firstName__c}</td>
                        <td>{!line.gender__c}</td>
                        <td>
                            <apex:inputField value="{!line.Age}" onchange="rollupSummary('{!Family.id }');">> </apex:inputField>

My question, is it possible use jquery to update Family.AgeTotal field? Below is the JQuery I have started working on but I kind of got stuck? Any chance for any guidance?


    function rollupSummary(familyId)
    {
         //$j('#'+familyId)
         //$j('#'+'001b000000OQirKAAT').children('span').text('xxx');
         var v = $j('#'+familyId).children('span').val();
         var c = $j('#child'+familyId).children('span').val();
         $j('#'+familyId).children('span').text(v)
     }

    Typical Table:


So if I change input value for Smith Family, only the total age for Smith should be updated.

Thanks in advance!