PHP Live Edit Table Example

PHP Live Edit Table Example

Today We See How To Make Live Editable Using PHP+JS+Mysql+Ajax

Let's Start.

For Updating Data Live in Our Database.

1. Let's First Going TO Start My Server.

2.Opening PHPMyadmin and Creating a Database Named "live"

and also a table name "live_data".

live.php (code )  //Our View Page
include 'connect.php';
//==========Checked Connection Establish or Not.==============

	echo "Failed TO Establish Database Connection";
	//===========Stop Execution if connection failed============

	//===========Fetching Result from table live_data==================
	$qr=mysql_query("select * from live_data");

	//=========adding border so it look good===============
	echo "<table style='border-collapse:collapse;' border='1'>";

	//============adding heading for each column=========================
	echo "<tr><th>ID</th><th>NAME</th><th>DOB</th><th>Qualification</th></tr>";
	while ($row=mysql_fetch_assoc($qr)) {

		//============Printing All Data in Table Row========

		//============data is html5 attribute for adding exta information on html page===
		echo "<tr>";
		echo "<td class='id' data-id='".$row['id']."' >".$row['id']."</td>";
		echo "<td class='item' data-name='name'>".$row['name']."</td>";
		echo "<td class='item' data-name='dob'>".$row['dob']."</td>";
		echo "<td class='item' data-name='qualification'>".$row['qualification']."</td>";
		echo "</tr>";
	echo "</tr>";
<script  src=""></script>
<script type="text/javascript">
	//===========Events Call When Our Page is Ready======
	$(document).ready(function() {

		//=============adding double click event on each table cell==========

			//=======get The Value Of Current Selected TD using this keyword======
			var values=$(this).text();
			$(this).html("<input value='"+values+"' class='input'>");



			var vales=$(this).val();


function sendToServer(value,id,key){

				url: 'api.php',
				type: 'POST',
				data: {key:key,id:id,value:value},
			.done(function(data) {
			.fail(function() {
				alert("Network error");



connect.php (Database Connection file)
//================+Connecting Database================

//=============Selecting Database======================

api.php (Our Api Which Update Our Date When We Post Through Ajax)
include 'connect.php';
$qr=mysql_query("UPDATE live_data set name='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
else if($_REQUEST['key']=="dob"){
$qr=mysql_query("UPDATE live_data set dob='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";	
else if($_REQUEST['key']=="qualification"){
	$qr=mysql_query("UPDATE live_data set qualification='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
	echo "Key Not Found";

Video Tutorial


Post a Comment