+ Start a Discussion

Add/ Remove table rows on button click in Visualforce

I have a table in VF and I have to make it dynamic.
User-added image

We are using the standard controller for the Visualforce page. All input fields (24 fields) in the table were mapped to a custom object. Whenever we fill the info and click on save button, all values from the table will save in a record.

Now I have to make this table dynamic. All the cell mapping should be the same as before.
1. Initially, I have to display 1 row and an 'Add' button should be at the bottom.
2. When the user clicks on the 'Add' button it should display another row.
3. From the second row, we need to display 'Delete' button/ link which allows the user to delete the row.
4. We should restrict user not to create more than 4rows (because we already mapped 24 cells to 24 fields in the custom object).

Can anyone help me with this?

Raj VakatiRaj Vakati
Reger this links




@Raj Vakat,

I already went through all those resources. 

My requirement is different. I'm not creating new records.

I have to create only 4 rows in the table. Each row has 6 columns (i.e, 24 cells in the table). I already have 24 fields in a custom object and I have to save values in 24 cells to 24 fields in the custom object (field mapping is already done).

Below is code for 1 row. I have similar code for all 4 rows with a different input field value.

<apex:pageBlockTable value="{!Stock__c}" var="a">                               
    <apex:column ><apex:inputField value="{!a.Name1__c}" /></apex:column>
    <apex:column ><apex:inputField value="{!a.Category1__c}" > </apex:column>
    <apex:column ><apex:inputField value="{!a.Description1__c}" /></apex:column> 
    <apex:column ><apex:inputField value="{!a.Code1__c}" /></apex:column>  
    <apex:column ><apex:inputField value="{!a.Specs1__c}" /></apex:column> 
    <apex:column ><apex:inputField value="{!a.Link1__c}" /></apex:column>