insert page
<?php
try
{
$cn=mysql_connect('localhost','root','') or die('Error on connetion:'.mysql_error());
$db=mysql_select_db('sankar') or die('Error on database:'.mysql_error());
$id =json_encode($_POST['id']);
$name1 =json_encode( $_POST['ab']);
$age = json_encode($_POST['age']);
$cm=mysql_query("insert into emp values($id,$name1,$age)");
$ds=mysql_query("select * from emp order by eid");
while($dt=mysql_fetch_array($ds))
{
$arr[]=array
(
'ID'=>$dt[0],
'NAME'=>$dt[1],
'AGE'=>$dt[2]
);
}
echo json_encode($arr);
mysql_close($cn);
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
Update page
<?php
try
{
$cn=mysql_connect('localhost','root','') or die('Error on connetion:'.mysql_error());
$db=mysql_select_db('sankar') or die('Error on database:'.mysql_error());
$id =json_encode($_POST['id']);
$name1 =json_encode( $_POST['ab']);
$age = json_encode($_POST['age']);
$cm=mysql_query("update emp set name=$name1,age=$age where eid= $id");
$ds=mysql_query("select * from emp order by eid");
while($dt=mysql_fetch_array($ds))
{
$arr[]=array
(
'ID'=>$dt[0],
'NAME'=>$dt[1],
'AGE'=>$dt[2]
);
}
echo json_encode($arr);
mysql_close($cn);
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
Delete page
<?php
try
{
$cn=mysql_connect('localhost','root','') or die('Error on connetion:'.mysql_error());
$db=mysql_select_db('sankar') or die('Error on database:'.mysql_error());
$id =$_POST['id'];
$cm=mysql_query("delete from emp where eid='$id'");
$ds=mysql_query("select * from emp order by eid");
while($dt=mysql_fetch_array($ds))
{
$arr[]=array
(
'ID'=>$dt[0],
'NAME'=>$dt[1],
'AGE'=>$dt[2]
);
}
echo json_encode($arr);
mysql_close($cn);
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
Select page
<?php
try
{
$cn=mysql_connect('localhost','root','') or die('Error on connetion:'.mysql_error());
$db=mysql_select_db('sankar') or die('Error on database:'.mysql_error());
$ds=mysql_query("select * from emp order by eid");
while($dt=mysql_fetch_array($ds))
{
$arr[]=array
(
'ID'=>$dt[0],
'NAME'=>$dt[1],
'AGE'=>$dt[2]
);
}
echo json_encode($arr);
mysql_close($cn);
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
Main page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#popupBoxClose
{
font-size: 10px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
#popup_box
{
display: none; /* Hide the DIV */
position: fixed;
_position: absolute; /* hack for internet explorer 6 */
height: auto;
width: auto;
background: #FFFFFF;
left: 580px;
top: 90px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px; /* additional features, can be omitted */
border: 2px solid #999999;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
}
</style>

<script language="javascript" type="text/javascript" src="jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
function y(s,t,u)
{
$('#sp').html(s);
$('#tb2').attr("value", t);
$('#tb3').attr("value", u);
$('#popup_box').slideDown("slow");
}
function z()
{
$('#popup_box').slideUp("slow");
}
function x(s)
{
var id=s;
$.post('h.php',{id:id},function (data)
{
data= eval(data);
$('#tb').html('');
$('#tb').append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th><th>AGE</th></tr>");
for(var i=0;i<data.length;i++)
{
$('#tb').append("<tr><td><a href='#' onclick='x("+ data[i].ID +")' style='text-decoration:none'>Delete</a></td><td><a href='#' onclick=y('"+ data[i].ID +"','"+ data[i].NAME +"','"+ data[i].AGE +"') style='text-decoration:none'>Edit</a></td><td>"+ data[i].ID +"</td><td>"+ data[i].NAME +"</td><td>"+ data[i].AGE +"</td></tr>");
}
});
}
</script>
<script language="javascript" type="text/javascript">

$(document).ready(function () {

$.ajax({
url: "ii.php",
type: "POST",
data:null,
cache: false,
datatype: "json",
success: function (data)
{
data= eval(data);
$('#tb').html('');
$('#tb').append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th><th>AGE</th></tr>");
for(var i=0;i<data.length;i++)
{
$('#tb').append("<tr><td><a href='#' onclick='x("+ data[i].ID +")' style='text-decoration:none'>Delete</a></td><td><a href='#' onclick=y('"+ data[i].ID +"','"+ data[i].NAME +"','"+ data[i].AGE +"') style='text-decoration:none'>Edit</a></td><td>"+ data[i].ID +"</td><td>"+ data[i].NAME +"</td><td>"+ data[i].AGE +"</td></tr>");
}
}

});
$('#c').on('click', function () {
var id= $('#a').val();
var ab=$('#b').val();
var age= $('#g').val();

$.ajax({
url: "f.php",
type: "POST",
data:{id:id,ab:ab,age:age},
cache: false,
datatype: "json",
success: function (data)
{
data= eval(data);
$('#tb').html('');
$('#tb').append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th><th>AGE</th></tr>");
for(var i=0;i<data.length;i++)
{
$('#tb').append("<tr><td><a href='#' onclick='x("+ data[i].ID +")' style='text-decoration:none'>Delete</a></td><td><a href='#' onclick=y('"+ data[i].ID +"','"+ data[i].NAME +"','"+ data[i].AGE +"') style='text-decoration:none'>Edit</a></td><td>"+ data[i].ID +"</td><td>"+ data[i].NAME +"</td><td>"+ data[i].AGE +"</td></tr>");
}
}

});
});
$('#btn1').on('click', function () {

var id= $('#sp').html();
var ab=$('#tb2').val();
var age= $('#tb3').val();

$.ajax({
url: "g.php",
type: "POST",
data:{id:id,ab:ab,age:age},
cache: false,
datatype: "json",
success: function (data)
{
data= eval(data);
$('#tb').html('');
$('#tb').append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th><th>AGE</th></tr>");
for(var i=0;i<data.length;i++)
{
$('#tb').append("<tr><td><a href='#' onclick='x("+ data[i].ID +")' style='text-decoration:none'>Delete</a></td><td><a href='#' onclick=y('"+ data[i].ID +"','"+ data[i].NAME +"','"+ data[i].AGE +"') style='text-decoration:none'>Edit</a></td><td>"+ data[i].ID +"</td><td>"+ data[i].NAME +"</td><td>"+ data[i].AGE +"</td></tr>");
}
}

});
$('#popup_box').slideUp("slow");
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<form name="frm" id="frm" action="#" method="post" enctype="multipart/form-data">
<table align="center" cellpadding="0" cellspacing="0">
<tr><td>EID</td><td><input type="text" name="a" id="a" size="15" maxlength="10" /></td></tr>
<tr><td>Name</td><td><input type="text" name="b" id="b" size="30" maxlength="50" /></td></tr>
<tr><td>Age</td><td><input type="text" name="g" id="g" size="30" maxlength="50" /></td></tr>
<tr><td>&nbsp;</td><td><input type="button" name="c" id="c" value="Save" style="width:80px" /></td></tr>
<tr><td>&nbsp;</td><td><table id="tb" cellpadding="0" cellspacing="0" border="1"></table></td></tr>
</table>
<div id="popup_box">
<table align="center">
<tr>
<td>
&nbsp;
</td>
<td>
<div id="popupBoxClose">
<a href="#" style="text-decoration: none" onclick="z()">Close</a>
</div>
</td>
</tr>
<tr>
<td>
EID
</td>
<td>
<span id="sp"></span>
</td>
</tr>
<tr>
<td>
NAME
</td>
<td>
<input type="text" id="tb2" name="tb2" />
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<input type="text" id="tb3" name="tb3" />
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<input type="button" id="btn1" name="btn1" value="Update" />
</td>
</tr>
</table>
</div>

</form>
</body>
</html>