+ 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;
          '<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>' +

User-added image
Rahul KumarRahul Kumar (Salesforce Developers) 
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 headerValue="Mobile Number">
                    <apex:inputField value="{!memb.Mobile_Number__c}"/>
                <apex:column headerValue="eMail Id">
                    <apex:inputField value="{!memb.E_Mail_Id__c}"/>
            <br/><apex:commandLink value="Add Row" action="{!addRow}" reRender="membAdd"/>        
        <apex:pageblockSection columns="1" >
            <apex:pageblockSectionItem >
                <apex:commandButton value="Save" />
                <apex:commandButton value="Cancel" />

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.

Rahul Kumar