Dynamically add or remove rows in a visualforce table

Visualforce can be leveraged to implement user interfaces as per our requirements, many times we need solutions that are dynamic enough that would cater to our future needs. Here is a visualforce application that allows dynamic addition or removal of table rows. Example uses wrapper class in building the logic. Cross symbol and addition symbol are used to add or remove rows.

Visualforce Page

<apex:page StandardController="Account" extensions="MultiAdd" id="thePage">

<apex:form >

<apex:pageblock id="pb" >

    <apex:pageBlockButtons location="bottom">        

        <apex:commandbutton value="Create Contacts" action="{!Save}"/>


        <apex:pageblock id="pb1">                                    

                <apex:pageblocktable value="{!lstInner}" var="e1" id="therepeat">

                   <apex:column >

                    <apex:facet name="header">Account</apex:facet>

                     <apex:inputfield value="{!e1.con.accountid}"/>


                   <apex:column >

                   <apex:facet name="header">Name</apex:facet>

                     <apex:inputtext value="{!e1.con.name}"/>


                   <apex:column >

                   <apex:facet name="header">Email</apex:facet>

                     <apex:inputfield value="{!e1.con.email}"/>


                   <apex:column >

                   <apex:facet name="header">Phone</apex:facet>

                     <apex:inputfield value="{!e1.con.Phone}"/>


                   <apex:column >

                   <apex:facet name="header">Del</apex:facet>

                      <apex:commandButton value="X" action="{!Del}" rerender="pb1">

                        <apex:param name="rowToBeDeleted" value="{!e1.recCount}" assignTo="{!selectedRowIndex}"></apex:param>



                   <apex:column >

                   <apex:facet name="header">Add</apex:facet>

                     <apex:commandButton value="+" action="{!Add}" rerender="pb1"/> 







Apex Class

public class MultiAdd{   
    public List<contact>lstAcct  = new List<contact>();
    public List<innerClass> lstInner{get;set;}
    public String selectedRowIndex{get;set;} 
    public Integer count = 1;
    public PageReference Save(){
        PageReference pr = new PageReference('/apex/MultiAdd');       
        for(Integer j = 0;j<lstInner.size();j++){
        insert lstAcct;
        return pr;
    public void Add(){  
        count = count+1;
    public void addMoreRows(){     
      innerClass objInnerClass = new innerClass(count);
    public void Del(){     
      count = count - 1;       
    public MultiAdd(ApexPages.StandardController ctlr){   
       lstInner = new List<innerClass>();
       selectedRowIndex = '0';       
    public class innerClass{              
        public String recCount{get;set;}               
        public Contact acct{get;set;}
        Public contact con{get;set;}
        public innerClass(Integer intCount){
            recCount = String.valueOf(intCount);                               
            con = new contact();           


  1. The above code is not retriving the name of account , phone,email automatically on selection of account and giving error as follows

    System.ListException: DML statment found null SObject at position 0
    Error is in expression '{!Save}' in component in page dynamicaddingandremoving: Class.DynamicRow.Save: line 23, column 1

    Class.DynamicRow.Save: line 23, column 1

  2. I got this error

    System.ListException: List index out of bounds: 3
    Error is in expression '{!Del}' in component in page addaccountrow: Class.MultiAdd.Del: line 55, column 1

    Class.MultiAdd.Del: line 55, column 1