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
ReplyDeleteAriel Macintosh™
Hey nice tutorial....
ReplyDeletethanks a lot mate , thats what i was searching
ReplyDeleteHey nice tutorial.... keep posting... All the best
ReplyDeleteGreat !! Good thing would be data/cell submission on ENTER key. All the best !!!!
ReplyDeleteAwesome thanks, dude
ReplyDeleteexcellent!!!!!!!!!!!!
ReplyDeleteIn one word, AWESOME :D
ReplyDeletemany many thanks this is just what i was looking for :D
please add xss blocking method. or just escape the html.
ReplyDeleteI love your tutorials are so easy understandable.
ReplyDeleteThnx a lot from Albania
excellent. Congratulations.
ReplyDeleteThanQ....V'much
ReplyDeletegreat work man.....congrats
ReplyDeleteHello 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.
ReplyDeleteParabéns (congratulations)
ReplyDeletehey srini,
ReplyDeletei 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
ReplyDeleteFirstname -- 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 :)
[email protected]
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
ReplyDeletethanks friend, I very much appreciate this important contribution.
ReplyDeleteAriel Macintosh™
Hey nice tutorial....
ReplyDeleteAnother awesome tutorial! I need this... :)
ReplyDeletehmmm grt tutorial man
ReplyDeleteit's good
ReplyDeletegood work
ReplyDeletenice example
ReplyDelete:harish soni
before this tutorial i was a "chimbin" , Excelent...thanks!!
ReplyDeletesome errors in the css.
ReplyDeletehi nice thought sir
ReplyDeletehow can i download the script? i can't download from here...
ReplyDeletenice, i need this script, thank's
ReplyDeletelove it thank you.
ReplyDeleteis 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
ReplyDeleteGreat work as always !! thanks for the share
ReplyDeleteAwesome this help me
ReplyDeleteAwesome .. thanx
ReplyDeleteThank
ReplyDeleteSweet as
ReplyDeletethanks. 9lessons is the source on great, sort code
ReplyDeletehow 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!!
ReplyDeletehow 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..
ReplyDeletesir please answer my question.. what will i do if the id is same? the id from the tr..
ReplyDeleteHowdy! I hope you are listening. I have a question.
ReplyDeleteQ: If you use Checkboxes or "select" how do I set up the "span"?
Hi and congratulations for this nice example.
ReplyDeleteI 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!
ReplyDeleteHelloo
ReplyDeleteYou are awesome!
Thanks a lot
Geate script
ReplyDeleteBut 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
ReplyDeleteHi, Is there a way to run this script in aspx?
ReplyDeleteThanks.
I want add a "<" select ">", how Can I do?
ReplyDeleteGreat!
ReplyDeleteNice tuts! I'd like to know how to do this in individual "<" tr ">"
ReplyDeletethanks
Fantastic tutorial, many thanks!
ReplyDeleteSuper duuuuper example.. gobbled it up.
ReplyDeleteGreat tutorial
ReplyDeleteBut i have some trouble.. table_edit_ajax.php can only run 1 mysql query? because I'm trying to add in sending of email after table is edited..
awesome tutorial. I this and enhanced in my project. Thanks for providing such gr8 tutorials.
ReplyDeletevary good
ReplyDeleteIs it possible to add rows as well as edit?
ReplyDeleteyaaa thank u
ReplyDeletevery helpful!
thans
ReplyDeletevery helpful
Thanks so much, it's simpler and yet much better than many commercial scripts.
ReplyDeletevery good tutorial but im still starting using ajax with php and i tried making a CRUD table. i have a button that adds new rows(static for testing), my problem is the buttons dont run. they have the same class for javascript .click() but the buttons of the newly added rows doesnt work. please help..
ReplyDeletegood one thnks a lot ;)
ReplyDeleteHello there is a way that instead a .php file could be an .html?
ReplyDeleteThanks a lot in advance for your answer.
Alex
Thanks for you tutorial...Good description...easy to understand.. thanks
ReplyDeleteIts a goodie. Thanks for your effort
ReplyDeletevery good....and Excellent
ReplyDeletewooooh.,,. nice post. thanks alot dude, its very useful for my project.. :)
ReplyDeletehey dude how i do for insert paragraph on the field
ReplyDeleteBest tut bro!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteReally nice one! Works like a charm!
ReplyDeleteAwesome tutorial, I'm gonna be a new follower
ReplyDeleteI cant seem to get it working with mssql database and codeigniter. Any thoughts?
ReplyDeleteHello, I have one more question. How to make this for select elements?
ReplyDeleteThank you for tutorial. It's great, but I have a little problem with it.
ReplyDeleteWhen the db field contain quotes, for example:
This is a "test"
when you clck for live edit, the text in the quotes disappears, if it is at the beginning - the whole field is fon on click. I tried many wayes, but no success. My question is, where exactly in the code I have to escape special charachters like theese?
10x in advance:)
A found a solution. Just in tableedit.php, variables in html tags have to be at single quotes, not double :)
ReplyDeleteAmazing Tutorial!
ReplyDeleteHow can edit the fields separately?
thanks you very much
ReplyDeleteThank you, thank you! simply the best
ReplyDeleteHi ,
ReplyDeleteThank's a lot for this Tut . Thats So Helpful for me .
I have question . in file table_edit_ajax.php When I open it i see error :
Notice: Undefined index: id in C:\xampp\htdocs\Live_table_edit\table_edit_ajax.php on line 3
how i can remove it ?
Nice post Helps alot
ReplyDeletethank you very much
ReplyDeleteThank you very much
ReplyDeleteThanks alot, my problem is the value is not updated in the database.
ReplyDeleteThank you very much
ReplyDeletehow to integrate this to codeigniter?
ReplyDeleteplease help!
Thanks.
ReplyDeleteVery nice script, thanks brother.
ReplyDeletevery help-full.
ReplyDeleteThanks a lot! This tutorial will help me in my school projects
ReplyDeletegood
ReplyDeletegood example, but for data more than 2000 its slowdown my page its because of /jquery/1.5/jquery.min.js" did you help me how to do it without slowdown the page
ReplyDeletei have created a control pannel live edit and delete data form database and displaye the pannel.but i have click an save button but value have not change and not save in database.can you help me.i have using ajax javascript and php so please help me...
ReplyDeleteHi
ReplyDeleteNice!
It is possible to edit ONLY the right field, showing however the left field also?
BR
Can you please guide me whether how to do it with individual td ? like if I click on "Firstname" only the firstname should be editable and not the lastname
ReplyDeleteVery Nice
ReplyDeleteHow i can increase number of fields in the record i.e. number of columns
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI love this, I love this, I love this! I love it mostly because it taught me a lot about jQuery, and I didn't have to use a plugin! What would be an amazing enhancement is if we could add the ability to submit the record by hitting enter, or clicking something. BTW, I gave up on checkboxes. Too much trouble. I use combos instead for boolean options, and it turns out to be better because it eliminates accidental box-checking.
ReplyDeletei already have ajax-jquery on saving and retrieving part. this is exactly what im looking for! thank you for your time in creating this.
ReplyDeleteFABULOUS WORK YOU ARE GENIUS MAN
ReplyDeleteHey its really working nice thanks a lot.
ReplyDeletewow..its very useful for my project.. :) thanks
ReplyDeleteVery useful tutorial
ReplyDeleteHey, really a great tutorial and it works quite fine for me.
ReplyDeleteI have two issues by using autocomplete and date picker inside this.
a.) autocomplete works fine, but selected content is not detected as a change
b.) opening the date picker and select a date causes to change to "ready" mode
Does someone solved this eventually already?
A life savor Article I used this to make comments editable :) Thank You
ReplyDeleteI had a question?
ReplyDeletehow to edit a page(for ex:edit option in shine.com of user fields..he can edit his fields i.e year of passing and firstname,lastname,email etc--)how this can be done... I developed a code for this but when i click edit button it is display a pop-up box and contains two buttons(Save & Cancel). I don't want to display pop-up boxes.when i click Save & cancel buttons should come(what i mean exactly is shine.com)..can anyone help...Thanks..
kishan.d
Thank you
ReplyDeletethank you so much :)
ReplyDeleteJust Love it
ReplyDeleteProves to be a very useful site :-)
ReplyDeleteGreat page
ReplyDeletefruitful tut :)
ReplyDeletehow to put select option on edit table. thanks
ReplyDeleteThanksssssss great tutorial!!! <3
ReplyDeleteGracias! desde México
ReplyDelete//Enter hit function
ReplyDelete$(".editbox").keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$(".editbox").hide();
$(".text").show();
}
});
Gr8 tutorial! Thanks a lot.
ReplyDelete