Salesforce 如何在Visualforce中为把手中的一个父表显示两个子表

我试图在一个父表下显示来自2个不同对象的2个表 Opportunity（父项）--Opportunity行项目（第一个子项） --校正（第二个孩子） 代码如下： 视觉力组件：

[在此处输入图像描述][1]

1.点击加号符号时，应显示表格

$jq(document).on('click','.renewalOpportunity__toggle--plus',function(e) {
                e.stopImmediatePropagation();                
                currentRenewalOpportunityRow = $jq(this).closest('tr');
                var renewalOpportunityId = $jq(this).attr('id');
                
                renewalOpportunityId = renewalOpportunityId.replace('renPlusIcon','');                                             
                              
                $jq(this).attr('class','');
                $jq(this).attr('class','renewalOpportunity__toggle--minus');
                $jq(this).attr('title',"{!$Label.PC_Close_Line_Item_Info}");
                if($jq(currentRenewalOpportunityRow).hasClass('even')){
                   $jq(currentRenewalOpportunityRow).find('td').css('background-color','white');
                } else if($jq(currentRenewalOpportunityRow).hasClass('odd')){
                   $jq(currentRenewalOpportunityRow).find('td').css('background-color','#f9f9f9');
                }
                showSpinner();   
                 getRenLineItem(renewalOpportunityId); 

2.从这里再次调用子表1调用子表2

<apex:actionFunction name="**getRenLineItem**" action="{!getRenewalOpportunityLineItem}" rerender="**renLineItemPanel**">
          <apex:param name="renewalOpportunityId" assignTo="{!selectedRenewalOpportunity}" value=""/>              
        </apex:actionFunction>
        
      <apex:actionFunction name="trueupItem" action="{!getRenewalOpportunityLineItem1}" rerender="trueUpPanel">
          <apex:param name="renOppId" assignTo="{!selectedRenewalOpportunity1}" value=""/>              
        </apex:actionFunction>

Child table 1 : function 

<apex:outputPanel id="renLineItemPanel">
        <apex:outputPanel rendered="{!isRenewalOpportunityClicked}">
            <script>                
               var renLineItemJSON = <apex:outputText escape="true" value="{!renLineItemJSON}"/>; 
                console.log('renLineItemJSON'+JSON.stringify(renLineItemJSON));
            
                var renOppNum = $jq(currentRenewalOpportunityRow).find('td label[for$="renOppRadio"]').text().trim();
                var renOppId = $jq(currentRenewalOpportunityRow).find('td a.renewalOpportunity__toggle--minus').attr('id');
                renOppId = renOppId.replace('renPlusIcon','');
                var templateSource = $jq("script#renewalOpportunityLineItemTemplate").html();
                var Template = Handlebars.compile(templateSource);  
                var viewRenLineItemHTML = Template({renOppNumber:renOppNum,renewalOpportunityId:renOppId,tempObj:renLineItemJSON}); 
                var renOppTable = $jq(currentRenewalOpportunityRow).closest('table').dataTable(); 
                var expandedRenewalOpportunityDiv = renOppTable.fnOpen(currentRenewalOpportunityRow[0],viewRenLineItemHTML,"renLineItemDetails");
            
               
                $jq(currentRenewalOpportunityRow).next('tr').find('table').dataTable({
                                "bPaginate":true, 
                                "bInfo":false,
                                "bFilter": false,
                                "oLanguage": {
                                  "sEmptyTable": "{!$Label.PC_No_result_to_display}",
                                  "sLengthMenu": "{!$Label.Partner_DT_Displaying_Length}",
                                  "oPaginate": {
                                        "sFirst":    "{!$Label.Partner_DT_First}",
                                        "sLast":     "{!$Label.Partner_DT_Last}",
                                        "sNext":     "{!$Label.Partner_DT_Next}",
                                        "sPrevious": "{!$Label.Partner_DT_Previous}"
                                   }
                                },
                                "lengthMenu": [[15, 25, 50, 100], [15, 25, 50, 100]],
                                "iDisplayLength": 15,
                                "aaSorting": [],
                                "aoColumnDefs": [
                                  { 'sType': 'num-html','aTargets':[3]},
                                  { 'sType': 'date-locale-sort','aTargets':[4]}                                                                                              
                                ]                             
                });
                $jq(currentRenewalOpportunityRow).addClass('renRowExpanded');
                if($jq(currentRenewalOpportunityRow).hasClass('renRadioSelected')){
                  $jq(currentRenewalOpportunityRow).find('td').css('background-color','#ffffcc');
                }
                $jq(currentRenewalOpportunityRow).closest('table').find('tr.renOpporRow:not(".renRowExpanded") td').css('background-color','#dbeac5');
             if(renLineItemJSON.length == 0){ 
                    $jq('select[name="renewalOpportunityLineItemTable_length"]').prop('disabled', 'disabled');
                }
            
                hideSpinner(); 
            **trueupItem(renOppId);** //calling 2 nd table from here
                       </script>
        </apex:outputPanel>
    </apex:outputPanel>

---------------------------

子表1：函数
var renLineItemJSON=；
log（'renLineItemJSON'+JSON.stringify（renLineItemJSON））；
var renOppNum=$jq（currentRenewalOpportunityRow）.find（$td label[for$=“renoppredio”]”）。text（）.trim（）；
var renOppId=$jq（currentRenewalOpportunityRow）.find（'td a.renewalOpportunity_uuutoggle--负号'）.attr（'id'）；
renOppId=renOppId.replace（'renPlusIcon'，''）；
var templateSource=$jq（“脚本#renewalOpportunityLineItemTemplate”）.html（）；
var Template=handlebar.compile（templateSource）；
var viewRenLineItemHTML=模板（{renopNumber:renOppNum，renewalOpportunityId:renOppId，tempObj:renLineItemJSON}）；
var renOppTable=$jq（currentRenewalOpportunityRow）.closest（'table'）.dataTable（）；
var expandedRenewalOpportunityDiv=renOppTable.fnOpen（currentRenewalOpportunityRow[0]，viewRenLineItemHTML，“renLineItemDetails”）；
$jq（currentRenewalOpportunityRow）.next（'tr'）.find（'table'）.dataTable({
“bPaginate”：对，
“bInfo”：假，
“bFilter”：错误，
“语言”：{
“sEmptyTable”：“{！$Label.PC_No_result_to_display}”，
“sLengthMenu”：“{！$Label.Partner\u DT\u Displaying\u Length}”，
“oPaginate”：{
“sFirst”：“{！$Label.Partner_DT_First}”，
“sLast”：“{！$Label.Partner_DT_Last}”，
“sNext”：“{！$Label.Partner\u DT\u Next}”，
“sPrevious”：“{！$Label.Partner\u DT\u Previous}”
}
},
“长度菜单”：[[15,25,50,100]，[15,25,50,100]，
“iDisplayLength”：15，
“aaSorting”：[]，
“aoColumnDefs”：[
{'sType'：'num html'，'aTargets'：[3]}，
{'sType'：'date locale sort'，'aTargets'：[4]}
]                             
});
$jq（currentRenewalOpportunityRow）.addClass（'renRowExpanded'）；
if（$jq（currentRenewalOpportunityRow）.hasClass（'renRadioSelected'））{
$jq（currentRenewalOpportunityRow）.find（'td'）.css（'background-color'，'ffffcc'）；
}
$jq（currentRenewalOpportunityRow）.最近的（'table'）.find（'tr.renoporrow:not（'.renRowExpanded'）.css（'background-color'，'#dbeac5'）；
如果（renLineItemJSON.length==0）{
$jq（'select[name=“renewalOpportunityLineItemTable_length”]”）。prop（'disabled'，'disabled'）；
}
hideSpinner（）；
**trueupItem（renOppId）；**//从这里呼叫第二桌
---------------------------

第二子表

var trueupJSON=；
log（'trueupJSON'+JSON.stringify（trueupJSON））；
var renOppNum=$jq（currentRenewalOpportunityRow）.find（$td label[for$=“renoppredio”]”）。text（）.trim（）；
var renOppId=$jq（currentRenewalOpportunityRow）.find（'td a.renewalOpportunity_uuutoggle--负号'）.attr（'id'）；
renOppId=renOppId.replace（'renPlusIcon'，''）；
var trueuptemplateSource=$jq（“脚本#更新trueuptemplate”）.html（）；
var trueupTemplate=handlebar.compile（trueuptemplateSource）；
var viewTrueUpHTML=trueupTemplate（{RenopNumber:renOppNum，renewalOpportunityId:renOppId，TrueUpdatea:trueupJSON}）；
var rentrueupTable=$jq（currentRenewalOpportunityRow）.closest（'table'）.dataTable（）；
log（'rentrueupTable'+JSON.stringify（rentrueupTable））；
var expandedRenewalRueUpOpportunityDiv=rentrueupTable.fnOpen（CurrentRenewalUpportunityRow[0]，viewTrueUpHTML，“trueUpDetails”）；
console.log（'expandedRenewalRueupOpportunityDiv'+expandedRenewalRueupOpportunityDiv'）；
hideSpinner（）；

---

但在单击加号后，首先我得到Opportunity line Item表，但几秒钟后，该表被True up表覆盖

如何在一个父表下显示两个子表

VisualForce页面：显示这两个表

<script id="renewalOpportunityLineItemTemplate" type="text/x-handlebars-template">               
<div class="expandedRenewalOpportunityDiv tableDiv">
    <table cellpadding="10" border="0" id="renewalOpportunityLineItemTable" class="table table-striped table-bordered table-responsive renewalOpporunity_subAssetTable">
        <thead>
        <tr class="renewalOpportunity_table-thead">
            <th>{!$Label.PC_Contract_Table_Serial_Num} / {!$Label.PC_Subscription_ID}</th>
            <th>{!$Label.PC_Contract_Table_Prod_Desc}</th> 
            <th>{!$Label.PC_Contract_Asset_Table_Seats}</th>
            <th>{!$Label.PC_Contract_Asset_Table_Deployment}</th>                      
            <th>{!$Label.PC_Contract_Table_Status}</th>
            <th>{!$Label.PC_Contract_Table_Asset_Status}</th>
            <th>{!$Label.PC_Opp_Table_Program_Eligibility}</th>   
            <th>{!$Label.PC_Contract_Table_Support_Program}</th>     
            <th>{!$Label.PC_Renewal_Table_Renew}</th> 
            <th>{!$Label.PC_Renewal_Table_Renewed_Seats}</th>                                            
            </tr>
            </thead>
            <tbody>
                {{#each tempObj}}                                            
                 <tr id="{{Id}}">
                  

                 <td>{{Asset_Serial_Number__c}}</td>
                 
                 <td>{{PricebookEntry.Product2.Name}}</td>
                  <td>{{Original_Units__c}}</td>
                 
                 <td>{{Contract_Line_Item__r.Asset_Deployment_Type__c}}</td>
                 
                 <td>{{Renewal_Status__c}}</td>
                 
                 <td>{{Asset_Status__c}}</td>
                 
                 
                 <td class="checkImg">{{#if ACE_Discount_Eligible__c}}<img class="noBlock" src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked">{{else}}<img class="noBlock" src="/img/checkbox_unchecked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">{{/if}}</td>
                                       
                                      
                                       <td>{{Support_Level__c}}</td>
                                       
                                      
                                        
                                       <td class="checkImg">{{#if Renew_Flag__c}}<img class="noBlock" src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked">{{else}}<img class="noBlock" src="/img/checkbox_unchecked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">{{/if}}</td>
                                                             
                                                             
                                                            
                                                             <td>{{Renewed_Quantity__c}}</td>
                                                             
                                                             
                                                             </tr>
                                                             {{/each}}                                                      
                                                             </tbody>
                                                             </table>
                                                             </div>
                                                             </script>
                                                             
<script id="renewalTrueUpTemplate" type="text/x-handlebars-template">               
<div class="expandedRenewalTrueUpOpportunityDiv tableDiv">                                         
  <table cellpadding="10" border="0" id="renewalOpportunityLineItemTable" class="table table-striped table-bordered table-responsive">
       <caption class="renewalOpportunityTrueUp_table-thead">Premium True-up</caption>
        <thead>
           
        <tr class="renewalOpportunity_table-thead">
            <th>{!$Label.PC_Primary_Admin_Email}</th>
            <th>{!$Label.PC_True_Up_Quantity}</th>
            <th>{!$Label.PC_True_Up_Status}</th>   
            <th>{!$Label.PC_Total_Premium_Eligible_Quantity}</th>     
            <th>{!$Label.PC_Total_Premium_Quantity}</th>                                            
            </tr>
            </thead>
            <tbody>
                {{#each trueupdata}}                                            
                 <tr id="{{Id}}">
                
                 <td>{{Primary_Admin_Contact_Id__r.Email}}</td>
                 
                 <td>{{True_Up_Down_Quantity__c}}</td>
                 
                 <td>{{True_Up_Down_Status__c}}</td>
                 
                 <td>{{Total_Premium_Eligible_Quantity__c}}</td>
                 
                 <td>{{Total_Premium_Quantity__c}}</td>
                 
                                                             </tr>
                                                             {{/each}}                                                      
                                                             </tbody>
                                                             </table>
                                                         


                                                             </div>
                                                                
                                                             </script> 
  [1]: https://i.stack.imgur.com/dKe5d.png

{！$Label.PC_Contract_Table_Serial_Num}/{！$Label.PC_Subscription_ID}
{！$Label.PC_Contract_Table_Prod_Desc}
{！$Label.PC_合同_资产_表格_座位}
{！$Label.PC_合同_资产_表_部署}
{！$Label.PC\合同\表格\状态}
{！$Label.PC\合同\表\资产\状态}
{！$Label.PC_Opp_Table_Program_quality}
{！$Label.PC\合同\表格\支持\程序}
{！$Label.PC_Renewal_Table_Renewal}
{！$Label.PC_续订
<script id="renewalOpportunityLineItemTemplate" type="text/x-handlebars-template">               
<div class="expandedRenewalOpportunityDiv tableDiv">
    <table cellpadding="10" border="0" id="renewalOpportunityLineItemTable" class="table table-striped table-bordered table-responsive renewalOpporunity_subAssetTable">
        <thead>
        <tr class="renewalOpportunity_table-thead">
            <th>{!$Label.PC_Contract_Table_Serial_Num} / {!$Label.PC_Subscription_ID}</th>
            <th>{!$Label.PC_Contract_Table_Prod_Desc}</th> 
            <th>{!$Label.PC_Contract_Asset_Table_Seats}</th>
            <th>{!$Label.PC_Contract_Asset_Table_Deployment}</th>                      
            <th>{!$Label.PC_Contract_Table_Status}</th>
            <th>{!$Label.PC_Contract_Table_Asset_Status}</th>
            <th>{!$Label.PC_Opp_Table_Program_Eligibility}</th>   
            <th>{!$Label.PC_Contract_Table_Support_Program}</th>     
            <th>{!$Label.PC_Renewal_Table_Renew}</th> 
            <th>{!$Label.PC_Renewal_Table_Renewed_Seats}</th>                                            
            </tr>
            </thead>
            <tbody>
                {{#each tempObj}}                                            
                 <tr id="{{Id}}">
                  

                 <td>{{Asset_Serial_Number__c}}</td>
                 
                 <td>{{PricebookEntry.Product2.Name}}</td>
                  <td>{{Original_Units__c}}</td>
                 
                 <td>{{Contract_Line_Item__r.Asset_Deployment_Type__c}}</td>
                 
                 <td>{{Renewal_Status__c}}</td>
                 
                 <td>{{Asset_Status__c}}</td>
                 
                 
                 <td class="checkImg">{{#if ACE_Discount_Eligible__c}}<img class="noBlock" src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked">{{else}}<img class="noBlock" src="/img/checkbox_unchecked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">{{/if}}</td>
                                       
                                      
                                       <td>{{Support_Level__c}}</td>
                                       
                                      
                                        
                                       <td class="checkImg">{{#if Renew_Flag__c}}<img class="noBlock" src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked">{{else}}<img class="noBlock" src="/img/checkbox_unchecked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">{{/if}}</td>
                                                             
                                                             
                                                            
                                                             <td>{{Renewed_Quantity__c}}</td>
                                                             
                                                             
                                                             </tr>
                                                             {{/each}}                                                      
                                                             </tbody>
                                                             </table>
                                                             </div>
                                                             </script>
                                                             
<script id="renewalTrueUpTemplate" type="text/x-handlebars-template">               
<div class="expandedRenewalTrueUpOpportunityDiv tableDiv">                                         
  <table cellpadding="10" border="0" id="renewalOpportunityLineItemTable" class="table table-striped table-bordered table-responsive">
       <caption class="renewalOpportunityTrueUp_table-thead">Premium True-up</caption>
        <thead>
           
        <tr class="renewalOpportunity_table-thead">
            <th>{!$Label.PC_Primary_Admin_Email}</th>
            <th>{!$Label.PC_True_Up_Quantity}</th>
            <th>{!$Label.PC_True_Up_Status}</th>   
            <th>{!$Label.PC_Total_Premium_Eligible_Quantity}</th>     
            <th>{!$Label.PC_Total_Premium_Quantity}</th>                                            
            </tr>
            </thead>
            <tbody>
                {{#each trueupdata}}                                            
                 <tr id="{{Id}}">
                
                 <td>{{Primary_Admin_Contact_Id__r.Email}}</td>
                 
                 <td>{{True_Up_Down_Quantity__c}}</td>
                 
                 <td>{{True_Up_Down_Status__c}}</td>
                 
                 <td>{{Total_Premium_Eligible_Quantity__c}}</td>
                 
                 <td>{{Total_Premium_Quantity__c}}</td>
                 
                                                             </tr>
                                                             {{/each}}                                                      
                                                             </tbody>
                                                             </table>
                                                         


                                                             </div>
                                                                
                                                             </script> 
  [1]: https://i.stack.imgur.com/dKe5d.png