how to make a table as editable one?

Question

I have created a non-editable table for account object. After clicking the edit link I want to edit a particular record. how could I achieve this ?

controller:

public class account2task1
{
public string id;
public Boolean bool {get;set;}
public List<account> contt{get;set;}
public account2task1(ApexPages.StandardController controller) {
    bool = true;
     id=ApexPages.currentPage().getParameters().get('id');
     contt=[select name,accountnumber,phone from account limit 5];
    }

public void save() {

bool =false;}
   }

VF page:

<apex:page standardController="account" extensions="account2task1" showHeader="false" sidebar="false">
    <apex:form > 
            <apex:pageBlock >

   <apex:pageBlockSection >
     <apex:dataTable value="{!contt}"   var="a" cellpadding="4" border="1" width="100">
                 <apex:column headervalue="Action">
                  <apex:commandLink value="Edit"  action="{!save}"  /> 
                 </apex:column>  
           <apex:column headervalue="Account name" width="50"  >
           <apex:inputField value="{!a.name}" html-disabled="{!bool}" id="a1" />
           <script>document.getElementById('{!$Component.a1}').disabled = {!bool}; </script> </apex:column> 

                 <apex:column headervalue="Account number" width="50" >
                <apex:inputField value="{!a.accountnumber}" html-disabled="{!bool}" id="a2" />
                <script>document.getElementById('{!$Component.a2}').disabled = {!bool}; </script> </apex:column> 

 </apex:dataTable></apex:pageBlockSection>

  </apex:pageBlock> 

 </apex:form>
</apex:page>

Answer 1

If I understand your question correctly, I've done something very similar recently.

After clicking the edit link I want the table as editable one. how could I achieve this ?

What you'd first need is a Boolean that would check whether or not your page is in "edit" mode, and something to call that switches that Boolean. Something like this:

public Boolean edit {
  get {
    if (edit == null)
      edit = false;

    return edit;
}
  set;
}

public void toggleEdit() {
  if (edit == false)
    edit = true;
  else
    edit = false;
}

A simple button like this that calls the function and rerenders your table should be all you need to command this:

<apex:commandButton value="Edit" action="{!toggleEdit}" reRender="table" />

In your table, you'd then want an inputField and an outputField with the property "rendered".

<apex:outputField value="{!t.My_Field__c}" rendered="{!NOT(edit)}" />
<apex:inputField value="{!t.My_Field__c}" rendered="{!edit}" />

Alls this does is checks whether or not the Boolean "edit" is true or false. If it's false, display the outputField, if it's true, display the inputField.

Hopefully this is something close to what you need.

Thanks!