Make Live Editable Table with jQuery AJAX

Have you ever think to make Live Editable Table that allows your users to quickly modify content and save it.

If you are not using live editing on your web page then you send the user to Edit form page every time when it wants to update its data and after saving take back it to the List page.

This is a time-consuming process and not very user-friendly.

You can do this with jQuery AJAX.

In this tutorial, I show you two ways to make your table columns editable –

  1. Using contentEditable attribute
  2. Showing input element when the user clicks on the cell.

Make Live Editable Table with jQuery AJAX


Contents

  1. With ContentEditable
  2. Demo 1
  3. Show Input Element
  4. Demo 2
  5. Conclusion

1. With ContentEditable

The contenteditable attribute enables the container to take input values.

HTML

Displaying user list on the Table element. Creating a <div contenteditable='true'> inside cell which stores the values.

Completed Code

<div class='container'>
 
 <table width='100%' border='0'>
  <tr>
   <th width='10%'>S.no</th>
   <th width='40%'>Username</th>
   <th width='40%'>Name</th>
  </tr>
  <?php 
   $query = "select * from users order by name";
   $result = mysql_query($query);
   $count = 1;
   while($row = mysql_fetch_array($result) ){
    $id = $row['id'];
    $username = $row['username'];
    $name = $row['name'];
  ?>
  <tr>
   <td><?php echo $count; ?></td>
   <td> 
     <div contentEditable='true' class='edit' id='username_<?php echo $id; ?>'> 
       <?php echo $username; ?>
     </div> 
   </td>
   <td> 
     <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'>
       <?php echo $name; ?> 
     </div> 
   </td>
  </tr>
  <?php
   $count ++;
  }
  ?> 
 </table>
</div>

CSS

.edit{
 width: 100%;
 height: 25px;
}
.editMode{
 border: 1px solid black;
}

/* Table Layout */
table {
 border:3px solid lavender;
 border-radius:3px;
}

table tr:nth-child(1){
 background-color:dodgerblue;
}
table tr:nth-child(1) th{
 color:white;
 padding:10px 0px;
 letter-spacing: 1px;
}

/* Table rows and columns */
table td{
 padding:10px;
}
table tr:nth-child(even){
 background-color:lavender;
 color:black;
}

PHP

Create a new update.php file for saving the modified content.

Completed Code

<?php

include "config.php";

$field = $_POST['field'];
$value = $_POST['value'];
$editid = $_POST['id'];

$query = "UPDATE users SET ".$field."='".$value."' WHERE id=".$editid;
mysql_query($query);

echo 1;

jQuery

Saving content when the focus out from <div class='edit'> within AJAX passing field name, value, and id.

Completed Code

$(document).ready(function(){
 
 // Add Class
 $('.edit').click(function(){
  $(this).addClass('editMode');
 });

 // Save data
 $(".edit").focusout(function(){
  $(this).removeClass("editMode");
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).text();

  $.ajax({
   url: 'update.php',
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },
   success:function(response){
    console.log('Save successfully'); 
   }
  });
 
 });

});

2. Demo 1

Click on the Table cell to edit.


3. Show Input Element

In the second method, instead of making container editable using input elements which show when the user click on the cell.

HTML

In the table cell with <div> container also creating input element which is shown only when the user clicks on the <div> container. This we do with jQuery.

Both of them contains the same values.

Completed Code

<table width='100%' border='0'>
 <tr>
  <th width='10%'>S.no</th>
  <th width='40%'>Username</th>
  <th width='40%'>Name</th>
 </tr>
 <?php 
 $query = "select * from users order by name";
 $result = mysql_query($query);
 $count = 1;
 while($row = mysql_fetch_array($result) ){
  $id = $row['id'];
  $username = $row['username'];
  $name = $row['name'];
 ?>
 <tr>
  <td><?php echo $count; ?></td>
  <td> 
    <div class='edit' > <?php echo $username; ?></div> 
    <input type='text' class='txtedit' value='<?php echo $username; ?>' id='username_<?php echo $id; ?>' >
  </td>
  <td> 
   <div class='edit' ><?php echo $name; ?> </div> 
   <input type='text' class='txtedit' value='<?php echo $name; ?>' id='name_<?php echo $id; ?>' >
  </td>
 </tr>
 <?php
 $count ++;
 }
 ?> 
</table>

CSS

CSS is similar as in above example but just added one new class.

Completed Code

.txtedit{
 display: none;
 width: 99%;
 height: 30px;
}

PHP

PHP code is similar to the first example there is no change in the code.

jQuery

Displaying Textbox when the click event triggers on <div class='edit'> and hiding the container.

When the focus out from the Textbox then sending AJAX request for saving content and hiding the Textbox and update the container text before showing

Completed Code

$(document).ready(function(){
 
 // Show Input element
 $('.edit').click(function(){
  $('.txtedit').hide();
  $(this).next('.txtedit').show();
  $(this).hide();
 });

 // Save data
 $(".txtedit").focusout(function(){
  
  // Get edit id, field name and value
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).val();
  
  // Hide Input element
  $(this).hide();

  // Hide and Change Text of the container with input elmeent
  $(this).prev('.edit').show();
  $(this).prev('.edit').text(value);

  // Sending AJAX request
  $.ajax({
   url: 'update.php',
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },
   success:function(response){
    console.log('Save successfully'); 
   }
  });
 
 });

});

4. Demo 2

Click on the cell and input value in the text box.


5. Conclusion

According to the user point of view, it is a good feature because it allows them to start editing right away.

I showed you two ways for enabling you can use any one of them in your current or next project.

Within the demonstration, I used TextBox element in the second example you also use any other elements like – radio button, checkboxes etc. according to your requirement.

Note – If you have long list of information and you are showing some of them on your table layout, in this case, its better to take the user to edit page to update some other information.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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