Jquery PHP

Table edit without page refresh using jquery

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 fullnames table columns id, firstname and lastname.


 TableEdit.php
Displaying records from fullnames table. Take a look at above wire-frame image.
//Table Records

 



Javascript Code
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

 

table_edit_ajax.php

 

db.php
PHP database configuration file

CSS Code
Styles for TableEdit.php