I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!
Download Script 
Live DemoDatabase
Sample database fullnames table columns id, firstname and lastname.
CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);
TableEdit.php
Displaying records from fullnames table. Take a look at above wire-frame image.
//Table Records
<table>
<?php
include('db.php');
$sql=mysql_query("select * from fullnames");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname=$row['firstname'];
$lastname=$row['lastname'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span>
<input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
<table>
<?php
include('db.php');
$sql=mysql_query("select * from fullnames");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname=$row['firstname'];
$lastname=$row['lastname'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span>
<input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
Javascript Code
Contains javascipt code. $(".edit_tr").click(function(){}- edit_tr is the CLASS name of TR tag. Using $(this).attr("id") calling TR tag ID value. $(".edit_tr").change(function(){} sending the ajax request to table_edit_ajax.php
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />'); // Loading image
if(first.length>0&& last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});
// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />'); // Loading image
if(first.length>0&& last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});
// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>
table_edit_ajax.php
Simple PHP code, updating fullnames tables records.
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
mysql_query($sql);
}
?>
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
mysql_query($sql);
}
?>
db.php
PHP database configuration file
<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
CSS Code
Styles for TableEdit.php
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:5px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:5px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
Exellent
Ariel Macintosh™
Hey nice tutorial....
thanks a lot mate , thats what i was searching
Hey nice tutorial.... keep posting... All the best
Great !! Good thing would be data/cell submission on ENTER key. All the best !!!!
Awesome thanks, dude
excellent!!!!!!!!!!!!
In one word, AWESOME :D
many many thanks this is just what i was looking for :D
please add xss blocking method. or just escape the html.
I love your tutorials are so easy understandable.
Thnx a lot from Albania
excellent. Congratulations.
ThanQ....V'much
great work man.....congrats
Hello Srinivas, thank you so much for your help I love this script it kicks ass, I have used so many of your scripts on my next website projects, you are the man. I really think you should put a donation icon in your website, if you do that i will be the first one to donate in your website, you really makes us happy and you are a life savior and we should appreciate that I will think all user will donate something even 1$ is something for people who does not have enough money, you really should think about this.
Parabéns (congratulations)
hey srini,
i was going through the paypal code (http://www.9lessons.info/2011/03/payment-system-with-paypal.html) and the error i am getting is that after successfully doing transaction i am redirected to success page but getting error message. I am not getting the product id there.
Please Help
and if i want to add 1 more thing..for example
Firstname -- Lastname -- Date
like that..how can i do that, i tryied but that it seems not work.. if u can help, i appreciate it.. nice tutorial btw :)
nick.onlyy@gmail.com
do you have or know of a grid like this out there as a JQuery component - customizable with paging, sort, etc - i am looking to implement a standard AJAX updateable grid but it would be great to just send the grid the db query and let it do all the work while i can customize some elements
thanks friend, I very much appreciate this important contribution.
Ariel Macintosh™
Hey nice tutorial....
Another awesome tutorial! I need this... :)
hmmm grt tutorial man
it's good
good work
nice example
:harish soni
before this tutorial i was a "chimbin" , Excelent...thanks!!
some errors in the css.
hi nice thought sir
how can i download the script? i can't download from here...
nice, i need this script, thank's
love it thank you.
is it possible to modify it so when you click on one of the entry to edit will open only the one you clicked on instead of both?
just awesome great works and thanks for sharing bookmarked and share
Great work as always !! thanks for the share
Awesome this help me
Awesome .. thanx
Thank
Sweet as
thanks. 9lessons is the source on great, sort code
how could you use this to create a select box. i tried a few things but to no luck. by the way thanks for this great code. many uses for it!!
how to use this in a profile of a member?? because it only have a equal id? what can i do to make it work? by the way thanks.. this is a great tutorial..
sir please answer my question.. what will i do if the id is same? the id from the tr..
Howdy! I hope you are listening. I have a question.
Q: If you use Checkboxes or "select" how do I set up the "span"?
Hi and congratulations for this nice example.
I have this problem: when update the fields in the table MYSQL the spaces between words are eliminated.
For example this phrase: Hello world !
In update is stored as: Helloworld!
Can you help me?
Cheers
I appreciate your lession. It helps me a lot!
Helloo
You are awesome!
Thanks a lot
Geate script
But when I tried to write Hebrew letters I got uncoded notes in my DB.
How can it be fixed?
this is the best website i have ever gone through
Hi, Is there a way to run this script in aspx?
Thanks.
I want add a "<" select ">", how Can I do?
Great!
Nice tuts! I'd like to know how to do this in individual "<" tr ">"
thanks
Fantastic tutorial, many thanks!