使用Javascript垂直删除列

时间:2016-03-28 09:00:37

标签: javascript html css salesforce visualforce

我正在尝试使用javascript在salesforce中垂直删除列。我对表中的每个td使用 <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); } } 。 我的要求是,当我点击删除图标时,它将删除该列,下一列将被移动。

我的代码是这样的 :

function map(lon, lat) {
    var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.FullScreen()
        ]),
        layers: [ layer ],
        target: 'map',
        view: new ol.View({
            maxZoom: 19,
            zoom: 15,
            center: coords
        }),
        interactions: ol.interaction.defaults({mouseWheelZoom:false})
    });
    map.addOverlay(new ol.Overlay({
        position: coords,
        positioning: 'bottom-center',
        element: $('<img>')
            .addClass('location-popover')
            .attr('src', 'pin.jpg')
    }));
}

删除前

enter image description here

删除后 enter image description here

1 个答案:

答案 0 :(得分:-3)

查看此网址。这将帮助您使用Javascript以列方式删除表数据。

链接:[点击此处查看示例] [1]

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