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.

                   [button_round color=”blue” url=”infotuts.com/demo/inline-table-editing/download.html”] DOWNLOAD CODE [/button_round] [button_round color=”blue” url=”infotuts.com/demo/inline-table-editing/”] LIVE DEMO [/button_round]

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.