Inline Editing HTML table with jQuery Ajax and PHP

I was doing a project using jqGrid. Its really a good jQuery Grid Plugin to do hard things easily with few lines of code. I saw a feature of inline editing of records in grid. jqGrid offers many features which really makes your grid functional in an exceptional way. Just few lines of codes and you are done. I thought of doing it in core jQuery and PHP. I started looking if some thing similar is already built or not. Then I got few tutorials but the one published in 9lessons is exactly the same. So I started creating by making it a reference.

inline table editing jQuery

                    DOWNLOAD CODE   LIVE DEMO

Note: Our LIVE DEMO has no database connection but you can download the code and try it in your local machine.

In this post I will explain how this code works and how you can use it in your projects. We have a database with a table named “subjects” with four columns  ID, Name, Comments, Replace. Below is the SQL query to create table:

</p>
CREATE TABLE IF NOT EXISTS `subjects` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) DEFAULT NULL,
 `comments` varchar(50) DEFAULT NULL,
 `replace` varchar(50) NOT NULL,
 PRIMARY KEY (`id`)
)
<p style="text-align: justify;">

Now Lets write our main PHP page which will fetch data from table and display it into an HTML table. Here’s the main code for that:

</p>
<table border=1 width="900px" class="mGrid">
<tr>
<th>Subject</th><th>Comments</th><th>First thought</th></tr>
<?php
$query = mysql_query("select * from subjects");
$i=1;
while($data=mysql_fetch_array($query)){

$id= $data['id'];
$name=$data['name'];
$comments = $data['comments'];
$replace_with = $data['replace'];

if($i%2){
?>
<tr id="<?php echo $id; ?>" class="tredit" />

<?php } else {?>
 <tr id="<?php echo $id ?>"bgcolor="#C2C2C2" class="tredit">
<?php }?>
 <td width="33%" class="edittbl">
 <span id="first_<?php echo $id; ?>" class="text"><?php echo $name; ?> </span>
 <input type="text" class="ip" id="first_ip_<?php echo $id ?>" value="<?php echo $name; ?>" </input></td>
<td width="33%" class="edittbl">
<span id="second_<?php echo $id; ?>" class="text"><?php echo $comments; ?> </span>
<input type="text" class="ip" id="second_ip_<?php echo $id ?>" value="<?php echo $comments; ?>" </input></td>
<td width="33%" class="edittbl">
<span id="third_<?php echo $id; ?>" class="text"><?php echo $replace_with; ?> </span>
<input type="text" class="ip" id="third_ip_<?php echo $id ?>" value="<?php echo $replace_with; ?>" </input></td>
</tr>
<?php
$i++;
}
?>
</table>
<p style="text-align: justify;">

This code may look a little bit hard-to-understand type (for new devs) but its not. Let me explain this. We start our HTML table with heading section wrapped in <th> </th>tag. Then we fetch data from MySQL using while loop and display it into our table.

You would have noticed “IF” condition in our code. This is just to give styling to alternate rows in our table. Notice that we are dynamically generating ID’s using PHP. Its really important because we will need to catch these ID’s in jQuery to do manipulations. Now lets have a look at our jQuery code:

</p>
$(".tredit").click(function()
{
var ID=$(this).attr('id');

$("#first_"+ID).hide();
$("#second_"+ID).hide();
$("#third_"+ID).hide();
$("#first_ip_"+ID).show();
$("#second_ip_"+ID).show();
$("#third_ip_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_ip_"+ID).val();
var second=$("#second_ip_"+ID).val();
var third=$("#third_ip_"+ID).val();
var dataString = 'id='+ ID +'&name='+first+'&comment='+second+'&replace='+third;
<p style="text-align: justify;">

This jQuery code simply hides all the elements with ID’s first_1, second_1 and third_1. And displays the input box in front of user so that he can enter new data. We have given input boxes ID’s with prefix first_ip_, second_ip_ and third_ip_. As soon as user enters his data change() function comes into picture and we store  values of all the cells in variable to prepare a datastring. We will send this datastring via ajax call to “post_tabel.php” which will simply update the table in database.

In “post_tabel.php” we extract all the information from recieved datastring and then update the table using update sql query.

Code for post_tabel.php:

</p>

$sql = "update subjects set `name`='$name',`replace`='$replace',`comments`='$comment' where `id`='$id'";
<p style="text-align: justify;">

Note: Code shown in this post is just the glimpse of working code. Please download whole code from here.

Inline editing may come in handy when you want to give users easiest way to update table records. Next time I will share how to insert/delete a complete new row to/from an HTML table on the fly.

14 thoughts on “Inline Editing HTML table with jQuery Ajax and PHP”

  1. The table is in the tutorial:
     
    Subject – Comments – First thought
     
    I would create different as
     
    Subject
    Valore
     
    Comments
    value
     
    First thought
    value
     
    I try to break the table as above, but any changes I make to the code working.

  2. not able to download content even after subscription

    want to downl;oad code.. but error is displying even after subscription

  3. I am wondering how I might make the columns sortable in this example. I have it working perfectly with my database info and the inline updating of db info… now just need to see about sorting if I am going to use this on my site. Have you posted anything about making the columns sortable? Or can you do that so that everyone benefits from the info?

    TY!!

    1. Hi Wayne,

      yes columns sorting can be implemented with this. I would write a separate post for that.
      Thanks for suggestion

      Regards:
      Sanjeev

  4. Pingback: Sorting HTML table using jQuery Table Sorter plugin - InfoTuts

  5. Pingback: Inline Table Edit AJAX | Toward Future

  6. Hi,

    I am not able to download the code. It says following although i subscribed yesterday.
    Sorry, We dont have your email. Please Subscribe Below.

    Thank you.

  7. I am trying to download the code keep asking Please Subscribe Below

    I think you went our email not your code

  8. Pingback: Ajax table Add Edit Delete Rows Dynamically Using jQuery PHP- InfoTuts

  9. Hi, thank you for this code. Adding a fourth column data and text input in js file and php files. But I can’t edit or delete. When i click input data is lost, and the text does not see. Help me please.

Comments are closed.