Hi,

Try the below code sample as reference:

<apex:page controller="EditAccount">
<script>

function hide(id,name)
{
var s=id;
var p=id+'_'+name;

document.getElementById(s).style.display="none";
document.getElementById(p).style.display="block";
return false;


}
function cancel(id,name)
{
var s=id;
var p=id+'_'+name;
document.getElementById(s).style.display="block";
document.getElementById(p).style.display="none";
return false;


}



function update(id,name)
{
var p=id+'_'+name;
var hre = document.getElementsByTagName(p);
var fname1= document.getElementById(id+'_f').value;
var lname1= document.getElementById(id+'_l').value;
var e1= document.getElementById(id+'_e').value;
var mobile= document.getElementById(id+'_m').value;
var dateofbirth= document.getElementById(id+'_b').value;
var datetime= document.getElementById(id+'_dt').value;
var dob1;
var db11;

alert(fname1+lname1+e1+mobile+dateofbirth+datetime);
if(fname1.length ==0)
{
alert('Please enter the First Name');
fname1.focus();
return false;
}
if(lname1.length ==0)
{
alert('Please enter the Last Name');
fname1.focus();
return false;
}
if(e1.length ==0)
{
alert('Please enter the Email');
fname1.focus();
return false;
}
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(!e1.match(emailExp))
{
alert('Please enter a valid Email id');
//e1.focus();
return false;
}
var exp=/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
/* if(!exp.test(mobile))
{
alert(" Mobile Number can't be empty and must be of 10 to 14 digits");
//mobile.focus();
return false;
}

if(dateofbirth.length==0)
{
alert(" Please enter the date of birth \ndd/mm/yy format");
return false;
}
else
{
db11=0;
var pp=/^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/;
if(!pp .test(dateofbirth))
{
alert('please Enter the date in proper format \ndd/mm/yy format');
return false;
}
else
{
dob1=checkdate(dateofbirth);
if(dob1==1)
{
return false;
}

}
}

if(datetime.length==0)
{
alert('Please enter the date and time');
//return false;
}
else
{
var format=/^\d{1,2}\/\d{1,2}\/\d{4}\s\d{1,2}\:\d{1,2}\?([aApP][mM]?)?$/;
if(!format.test(datetime))
{
alert('please enter the Date and Time in proper format\ndd/mm/yy format');
// return false;
}
else
{

//return false;

}

}
*/
// alert(dob1);
calling(id,fname1,lname1,e1,mobile,dob1);
}


function checkdate(date1)
{
var arrDt = date1.split('/');
var i=0;
if(arrDt[0]<1 || arrDt[0]>=31)
{
alert('please enter the valid date');
i=1;

}

if(arrDt[1]<1 || arrDt[1]>12)
{
alert('please enter the valid month');
i=1;

}
if(arrDt[2]<1600 || arrDt[2]>4000)
{
alert('please enter the valid year');
i=1;

}
if(arrDt[1].length==1)
{
arrDt[1]='0'+arrDt[1];
}
if(arrDt[0].length==1)
{
arrDt[0]='0'+arrDt[0];
}
if(i==1)
{
return 1;
}
else
{
return (arrDt[2]+'-'+arrDt[1]+'-'+arrDt[0]);
}
}


</script>

<apex:form id="f" >
<apex:outputPanel id="op" >
<apex:pageBlock id="out" >
<div style="border: 1px solid rgb(100, 200, 200); width: 900px;" >
<table border="0" BGCOLOR="#CEF6F5" >
<tr>
<Th Style=" width:45px; text-Align:left; bgcolor:rgb(0, 255, 255)" >Action</th>
<th>&nbsp;</th>
<th Style=" width:80px; text-Align:left;" > <apex:commandLink action="{!sorting}" reRender="out" >Name</apex:commandLink></th>
<th>&nbsp;</th>
<th Style=" width:80px; text-Align:Left;" ></th>
<th>&nbsp;</th>
<th Style=" width:145px; text-Align:left;" ></th>
<th>&nbsp;</th>
<th Style=" width:95px; text-Align:Left;" >Mobile Number</th>
<th>&nbsp;</th>
<th Style=" width:180px; text-Align:Left;" >Date of Birth</th>
<th>&nbsp;</th>
<th Style=" width:180px; text-Align:Left;" ></th>
</tr>
</table>
</div>

<apex:repeat value="{!ct}" var="rd" >
<div id="{!rd.id}" style="border: 1px solid rgb(100, 200, 200); width: 900px;" >
<table border="0">
<tr>
<td Style=" width:45px; text-Align:left; ">
<apex:commandLink onclick=" return hide('{!rd.id}','{!rd.name}')" style="text-Align:left;" >Edit</apex:commandLink>|<apex:commandLink action="{!del}" reRender="op" ><apex:param name="id" value="{!rd.id}"/>Del</apex:commandLink>
</td>
<td>&nbsp;</td>
<TD Style="width:80px; text-Align:left;" >{!rd.name}</td>
<td>&nbsp;</td>
<td Style=" width:80px; text-Align:left;" ></td>
<td>&nbsp;</td>
<td Style=" width:150px; text-Align:left;" ></td>
<td>&nbsp;</td>
<td Style=" width:95px; text-Align:left;" >{!rd.Phone}</td>
<td>&nbsp;</td>
<td Style="width:170px; text-Align:left;" ></td>
<td>&nbsp;</td>
<td Style=" width:180px; text-Align:left;" ></td>
</tr>
</table>
</div>


<div id="{!rd.id}_{!rd.name}" name="{!rd.id}_{!rd.name}" style = "display:none; border: 1px solid rgb(100, 200, 200); width: 900px;" >

<table border="0">
<tr>
<td Style=" width:45px; text-Align:left;">
<apex:commandLink action="{!del}" reRender="out" onclick=" return update('{!rd.id}','{!rd.name}')" ><apex:param name="id" value="{!rd.id}"/> Update</apex:commandLink>
<br/><apex:commandLink onclick=" return cancel('{!rd.id}','{!rd.name}')" >Cancel</apex:commandLink>

</td>
<td>&nbsp;</td>
<TD Style=" width:80px; text-Align:left;"><INPUT type="text" NAME="ftext" size="9" value="{!rd.name}" id="{!rd.id}_f" /></td>
<td>&nbsp;</td>
<td Style=" width:80px; text-Align:left;"></td>
<td>&nbsp;</td>
<td Style=" width:140px; text-Align:left;"></td>
<td>&nbsp;</td>
<td Style=" width:95px; text-Align:left;"></td>
<td>&nbsp;</td>
<td Style=" width:170px; text-Align:left;"></td>
<td>&nbsp;</td>
<td Style=" width:180px; text-Align:left;"></td>
</tr>
</table>
</div>




</apex:repeat>
<apex:actionFunction name="calling" action="{!edit}" reRender="op" >
<apex:param name="id11" value="" assignTo="{!id1}"/>
<apex:param name="first" value="" assignTo="{!name}"/>

<apex:param name="emailid" value="" assignTo="{!email}"/>
<apex:param name="mobilenumber1" value="" assignTo="{!mobile}"/>
<apex:actionFunction id="aaa" name="pp"><apex:param name="id2" value="{rd.id}"/></apex:actionFunction>
</apex:actionFunction>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>

================= Apex Controller==========================

public class EditAccount{

public string id1{set;get;}
public string fname{set;get;}
public string lname{set;get;}
public string email{set;get;}
public string mobile{set;get;}
public integer flag{get;set;}
public list<Account> ct{get;set;}
public EditAccount()
{
flag=0;
display();

}

public void display()
{
ct=[SELECT name,Phone from account];

// sorting();

}

public void del()
{
string id1=ApexPages.currentPage().getParameters().get('id');
contact ct1=new contact(id=id1);

delete ct1;
display();


}
public void edit()
{
contact ct1=new contact(id=id1);
ct1.firstname=fname;
ct1.lastname=lname;
ct1.email=email;
// ct1.MobilePhone=mobile;
// ct1.Birthdate=date.valueof(birthdate1);
update ct1;
display();

}

public void sorting()
{
list<string> s=new list<string>();
list<account> ct1=new list<account>();
map<string,account> msort=new map<string,account>();
system.debug('ct value'+ct);
if(ct.size()>0)
{

for(account ca : ct)
{
s.add(ca.name);
msort.put( ca.name,ca);


}
s.sort();
if(flag==0)
{
flag=1;
for(string p1:s)
{
ct1.add(msort.get(p1));
}

}
else
{
flag=0;
for(integer i=s.size()-1;i>0;i--)
{
string p=s.get(i);
ct1.add(msort.get(p));
}
}
system.debug('ccccccccccc'+ct1);
ct=new list<account>(ct1);
// display();
}

}

}

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.