Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit HTML table value directly by clicking on table cells. In our previous tutorial you have learned Dynamic Dependent Select Box using Jquery and Ajax. In this tutorial you will learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.
Live editable table is good for update content quickly while viewing it.
This can be used to update full records details or some of them and don’t need to send the user to edit form page.
It is user-friendly and time-saving.
To implementing this I am using jQuery AJAX.
In this tutorial, I show you two ways to make your table columns editable –
– Using contentEditable attribute
-Showing the input element when the user clicks on the cell.
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!
Database
Sample database demo and table name users : id, first_name and last_name.
Dumping data for table `users `
index.php
Displaying records from users table. Take a look at above wire-frame image.
Javascript Code : custom.js 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