make a table row editable and update row data in php and jquery

Lets start with the very basics of what we will be doing in this tutorial first we want to make the row editable when the edit button is clicked and after editing we need to update the row in the database. Below is the glimpse of what we will be creating.

make a table row editable and update row data in php and jquery

make a table row editable and update row data in php and jquery

We will achieve this in three simple steps mentioned below:

1 making the row editable: Before actually editing the row data we first need to make the row data editable by setting  the contentEditable property of the columns to true.At this this point we don’t need the edit button instead we want a update button to commit the changes made. So we will replace the edit button with a simple update button. This can be acheived by using jquery or just simple javascript but we will mix them up for the sake of convenience and simplicity. In the below code i used setEditable function to make the row editable and to insert an update button. setEditable function gets the clicked row’s id as a parameter makes all the elements of that row editable(only those which have ‘editable’ class) and the edit button of that row is also replaced by update button. Here is the code for function setEditable:


2 Send edited data to Server: As javascipt is a client side language so modifying the data in the client side will not change it on the server so we want to send it back to the server to update the records in the database. For that we will use the post request to send the information to the server in jquery there are two methods to do that $.post function or $.ajax function. I am using the $.post here in this example. Along with the post request i will send all the edited records to the server as a parameter to the $.post function. This is all done in the function named editStudent. The code is given below:

Copy the Below PHP code in the same file as the above functions and save file with .php extension so that the functions can be called.

3 Updating the records in the database: In the above editStudent function we will send the modified data to editStudent.php file which will recieve the data associated with the post request using $_POST superglobal and updates the database row. You need to first establish the connection with the database which is done in the below code of “editStudent.php” file:

All the code is tested in Firefox , Chrome , Opera and Safari. You can downoad the source files by clicking the button below.
Download Source
Also check :

If you have any queries don’t hesitate to leave a comment i will get back to you as soon as possible. And dont forget to share it with your friends. Till next time HAPPY CODING!

2 thoughts on “make a table row editable and update row data in php and jquery

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge