+ Start a Discussion
Puja ChoudharyPuja Choudhary 

add rows on click of button in

Hi, I have a cart form which is a pop up.I want to add extra editable rows in the form  on click of a button.

 var products = ProductManager.getAllProducts();
      $.each(products, function(){
        var total = this.quantity * this.price;
        $cartTable.append(
          '<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '">' +
          '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' +
          '<td name="name<? $i ?>">' + this.name + '</td>' +
          '<td title="Unit Price" name="unitprice<? $i ?>">Rs ' + this.price + '</td>' +
          '<td title="Quantity" name="quantity<? $i ?>"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' +
          '<td title="Total" class="' + classProductTotal + '"> Rs ' + total + '</td>' +
          '<td title="Remove from Cart" class="text-center" style="width: 30px;"><a href="javascript:void(0);" class="btn btn-xs btn-danger ' + classProductRemove + '">X</a></td>' +
          '</tr>'
        );


User-added image
Rahul KumarRahul Kumar (Salesforce Developers) 
Hi,
VisualForce Page:
<apex:page sidebar="false" controller="MemberPopup" >
<apex:form >
    <apex:pageBlock id="membAdd" >                  
        <apex:pageblockSection >
            <apex:pageBlockTable value="{!memberAddList}" var="memb">
                <apex:column headerValue="Member Name">
                    <apex:inputField value="{!memb.Name}"/>
                </apex:column>
                <apex:column headerValue="Mobile Number">
                    <apex:inputField value="{!memb.Mobile_Number__c}"/>
                </apex:column>
                <apex:column headerValue="eMail Id">
                    <apex:inputField value="{!memb.E_Mail_Id__c}"/>
                </apex:column>
            </apex:pageBlockTable> 
            <br/><apex:commandLink value="Add Row" action="{!addRow}" reRender="membAdd"/>        
        </apex:pageblockSection>        
        <apex:pageblockSection columns="1" >
            <apex:pageblockSectionItem >
                <apex:commandButton value="Save" />
                <apex:commandButton value="Cancel" />
            </apex:pageblockSectionItem>         
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Apex Code:
public class MemberPopup 
{
    public List<Member__c> memberList {get;set;}
    public List<Member__c> memberAddList {get;set;}
    public String memberName {get;set;}   
     
    public MemberPopup()
    {
        String sql = 'SELECT Name, E_Mail_Id__c FROM Member__c';
        memberList = Database.Query(sql);
        memberAddList = new List<Member__c>();
        memberAddList.add(new Member__c());
    }
    
    public void AddRow()
    {
        memberAddList.add(new Member__c());
    }  
}

Hope it will be helpful.

Please mark it as best answer if the information is informative.so that question is removed from an unanswered question and appear as a proper solution.

Thanks
Rahul Kumar