Spalten vertikal mit Hilfe von Javascript löschen

Question

Ich versuche, Spalten in Salesforce mithilfe von Javascript zu löschen. Ich verwende apex:repeat für jeden td in der Tabelle. Meine Anforderung ist, dass, wenn ich auf das Löschen-Symbol klicke, diese Spalte gelöscht wird und die nächste Spalte weiter verschoben wird.

Mein Code ist wie dieser :

<apex:outputPanel id="OfferTbld"> 
    <table class="table choose-offers-table" > 
     <thead> 

      <th></th> 
      <apex:repeat value="{!ListOfferWrapper}" var="O"> 
      <th> 
      <apex:image id="DeleteImage" value="/img/func_icons/remove12_on.gif" onclick="deleteRow({!O.Index})"> 
       <apex:param id="imgidx" value="{!O.Index}" assignTo="{!getIndex}"/> 
      </apex:image> 
      </th> 
     </apex:repeat> 
     </thead>        
     <tbody> 
     <tr> 
       <td>Terms</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="TermOffer{!O.Index}" ><apex:outputField value="{!O.Offer.fintechLLC__Terms_In_Months__c}" rendered="{!O.IsEditable}"/> 
       <apex:inputField value="{!O.Offer.fintechLLC__Terms_In_Months__c}" styleClass="OfferTermClass" onkeyup="onChangeTerm(this.value);" rendered="{!!O.IsEditable}"/></td> 
       </apex:repeat> 

     </tr>        
      <tr> 
       <td>Advance Amount</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="AdvanceOffer{!O.Index}"><apex:outputField value="{!O.Offer.fintechLLC__Funding_Amount__c}" rendered="{!O.IsEditable}"/> 
       <apex:inputField value="{!O.Offer.fintechLLC__Funding_Amount__c}" onkeyup="onchangeFunding(this.value);" styleClass="OfferFundedClass" rendered="{!!O.IsEditable}"/></td> 
       </apex:repeat> 

     </tr> 
     <tr> 
       <td>Payback</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="PaybackOffer{!O.Index}" ><apex:outputField value="{!O.Offer.fintechLLC__Payback_Amount__c}" rendered="{!O.IsEditable}"/> 
       <apex:inputField value="{!O.Offer.fintechLLC__Payback_Amount__c}" styleClass="OfferPaybackClass" rendered="{!!O.IsEditable}" html-disabled="true"/></td> 
       </apex:repeat> 
     </tr> 
     <tr> 
       <td>Factor</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="Factor{!O.Index}" > <apex:outputField value="{!O.Offer.fintechLLC__Factor_Rate__c}" rendered="{!O.IsEditable}"/> 
       <apex:inputField value="{!O.Offer.fintechLLC__Factor_Rate__c}" onkeyup="onChangeFactor(this.value)" styleClass="OfferFactorClass" rendered="{!!O.IsEditable}"/></td> 
       </apex:repeat> 
     </tr> 
     <tr> 
       <td>Daily Payback Amount</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="DailyPB{!O.Index}"><apex:outputField value="{!O.Offer.fintechLLC__Daily_PB_Amount__c}" rendered="{!O.IsEditable}" /> 
       <apex:inputField value="{!O.Offer.fintechLLC__Daily_PB_Amount__c}" styleClass="OfferDailyClass" rendered="{!!O.IsEditable}" html-disabled="true"/></td> 
       </apex:repeat> 
     </tr> 
     <tr> 
       <td>Percentage Of Gross</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="Percentage{!O.Index}"><apex:outputField value="{!O.Offer.fintechLLC__Percentage_Of_Gross__c}" rendered="{!O.IsEditable}" /> 
       <apex:inputField value="{!O.Offer.fintechLLC__Percentage_Of_Gross__c}" styleClass="OfferPerGrossClass" rendered="{!!O.IsEditable}" html-disabled="true"/></td> 
       </apex:repeat> 
     </tr> 
     <tr> 
       <td>Actions</td> 
       <apex:repeat value="{!ListOfferWrapper}" var="O"> 
       <td id="Action{!O.Index}"><apex:commandLink value="Edit" action="{!EditOffer}" reRender="OfferTbld"> 
        <apex:param name="idx" value="{!O.Index}" assignTo="{!getIndex}"/> 
        </apex:commandLink>&nbsp; 
        <apex:commandLink value="Save" action="{!SaveOffer}" reRender="OfferTbld"> 
        <apex:param name="idx" value="{!O.Index}" assignTo="{!getIndex}" /> 
        </apex:commandLink>&nbsp; 
        <apex:commandLink value="Cancel" action="{!CancelOffer}" reRender="OfferTbld"> 
        <apex:param name="idx" value="{!O.Index}" assignTo="{!getIndex}"/> 
        </apex:commandLink> 
       </td> 
       </apex:repeat> 
     </tr>         
     </tbody> 
    </table> 
    </apex:outputPanel> 

function deleteRow(val) 
    { 
    console.log('In DeleteRow Function------>'+val); 
    var Term=document.getElementById("TermOffer"+val); 


    console.log('Term---->'+Term+'Advance------'+Advance+'Payback------->'+Payback+'Factor-------->'+Factor+'DailyPB--------->'+DailyPB+'Percentage------->'+Percentage); 

    if(val!=null){ 

     Term.deleteCell(val); 

    } 

    } 

Vor Löschen

Nach Löschen

Answer 1

Werfen Sie einen Blick auf diese URL Dies wird Ihnen helfen, Tabellendaten spaltenweise mit Javascript zu entfernen.

-Link: [hier klicken Beispiel zum Ansehen] [1]

[1]: https://jsfiddle.net/saravananudt/1t1b15h7/