Rollup Total Jquery

时间:2014-02-21 11:46:24

标签: javascript jquery html apex-code

我使用HTML创建了一个表。该表由一个标题组成,然后是许多名为Family的行。每个Family行可以有许多行代表该系列的单个成员(请参阅下面的代码)。

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

我的问题是,是否可以使用jquery更新Family.AgeTotal字段?下面是我开始研究的JQuery,但是我遇到了什么问题?有机会获得任何指导吗?

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:
Family Name         Address               Age Total
Smith           17 Smith Street              20
      James                    Male       17
        Sam                    Female      3
Been            17 Been Street               23
        Bob                    Male       17
        Tom                    Female      6

因此,如果我更改Smith Family的输入值,则只应更新Smith的总年龄。

提前致谢!

2 个答案:

答案 0 :(得分:0)

好吧,我不太确定我理解你的结构,因为表格中没有具体的数据,但是对于这个FIDDLE,我假设你在特定领域有特定的年龄这是可识别的,而且,出于某种原因,你需要年龄的总和。

JS

$('#buttonid').click(function(){
    var personage = 0;
    var newage = 0;
    $('table tr td.age').each(function(){
          newage = +$(this).html(); 
          personage = personage + newage;
                                         });
    $('.totalage').append(personage);
});

但话又说回来,我可能都被洗劫了。

编辑:

好的,根据你的桌子,我会给你一个镜头,每个姓氏需要一个.each,然后每个年龄都需要一个.each。如果你有一个家庭名称的td和一个年龄td。也可能更容易。

var personage = 0;
var newage = 0;
$('table tr td.familyname').each(function(){
                                            $('table tr td.familyname td.age).each(function(){
                                                             newage = +$(this).html(); 
                                                          personage = personage + newage;
                                                                                              });
                                          $('table tr td.familyname td.totalage').append(personage);

                                             });

让我跟我的小提琴玩一下,看看我能想出什么。

答案 1 :(得分:0)

在玩了一些你给我的回应后,我找到了一个很好的解决方案。

JavaScript Code
        function rollupSummary(val)
        {
            var rolled = 0.00;
            $j('.child_'+val).each(function() {
                rolled = rolled + parseFloat($j(this).val());
            });
            $j('.'+val).text(rolled.toFixed(2));
        }

HTML代码

<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>
                   <apex:outputText styleClass="{!Family.Id}" value="{!Family.AgeTotal}"/>
               </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}');" styleClass="child_{!Family.Id}"/>

希望有所帮助。