jquery+php implements editable table field contents and saves _jquery in real time

This example applies to the scenario: when viewing the details, such as user details, found that some of the field information needs to be modified, you can directly click on the field content to modify, save the user time, (traditional approach is to enter an edit page, list all the edited field information, even if you only need to edit one or two of the field content, Then click Submit to improve the Web response speed, thus improving the front-end user experience.

This example relies on the jquery library and is based on plug-ins with the following characteristics:
Real-time editing, background real-time response, and immediate completion of local refresh.
You can customize the input form type, currently jeditable provides Text,select,textarea type.
Responds to the keyboard's return and ESC keys.
Plug-in mechanism, this example provides consolidation of the DatePicker Calendar control with the jquery UI.
Here we go step-by-step to explain the implementation process.
XHTML
we need to make a form as follows:

<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <thead> <tr class= "Table_title" > &LT;TD colspan= "4" ><span class= "open" ></span> customer information </td> </tr> </thead> <tbody > <tr> <td width= "20%" class= "Table_label" > Name </td> <td width= "30%" class= "edit" id= "use  Rname "> Li Xiaosan </td> <td width=" 20% "class=" Table_label "> Office tel </td> <td width=" 30% "class=" edit " Id= "Phone" >021-12345678</td> </tr> <tr> <td class= "Table_label" > Appellation </td> &L  T;TD class= "edit" id= "solutation" > Mr. </td> &LT;TD class= "Table_label" > Mobile </td> <td class= "edit" 
   Id= "mobile" >13800138000</td> </tr> <tr> <td class= "Table_label" > Company name </td> &LT;TD class= "edit" id= "Company" > Chang Feng Group </td> <td class= "Table_label" > E-mail </td> <td class= "Ed It "id=" email ">lrfbeyond@163.com</td> </tr> <tr> <td class= "Table_label" > Potential customer Source </td> <td class= "  Edit_select "id=" Source > Public Relations </td> <td class= "Table_label" > Limited time </td> <td class= "DatePicker" Id= "Sdate" >2011-11-30</td> </tr> <tr> <td class= "Table_label" > Position </td> < TD class= "Edit" id= "job" > Department manager </td> <td class= "Table_label" > website </td> <td class= "edit" id= "we B ">www.helloweba.com</td> </tr> <tr> <td class=" Table_label "> Creation time </td> < td>2010-11-04 21:11:59</td> <td class= "Table_label" > Modification time </td> <td id= "Modifiedtime" >201 0-11-05 09:42:52</td> </tr> <tr> <td class= "Table_label" > Remarks </td> <td class= 
 "TextArea" id= "note" colspan= "3" > Memo information </td> </tr> </tbody> </table>

This is a table of user information, from the code can find the response of the field information TD has given a class and id attribute, and assigned a value. It is worth mentioning that the TD in the table corresponding to the value of the ID and the database in the field name one by one corresponds to do so in order to edit the background to get the corresponding field information, the following PHP code will be mentioned.
CSS

table{width:96%; margin:20px auto; border-collapse:collapse;} 
Table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6; 
TABLE_TITLE{HEIGHT:26PX line-height:26px; Background:url (btn_bg.gif) Repeat-x bottom; 
 Font-weight:bold; Text-indent:.3em; outline:0} 
. Table_label{background: #e8f5fe; text-align:right;} 

CSS renders the table style, making the table look more comfortable.
JQuery
When it comes to jquery, be sure to refer to the jquery and jeditable plug-ins between the

<script type= "Text/javascript" src= "js/jquery.js" ></script> 
<script type= "Text/javascript" src= "Js/jquery.jeditable.js" ></script> 

Then start calling the plug-in.

$ (function () { 
   $ ('. Edit '). Editable (' save.php ', { 
     width   :), 
     height  : 
     //onblur  : ' Ignore ', 
     cancel  : ' Cancel ', 
     submit  : ' OK ', 
     indicator: '  ', 
     ToolTip  : ' Click to edit ... '}; 
 

Plug-ins provide a number of calls to properties and methods. You can set the width, height, text information of the button, the loading picture when submitting, the hint information on the mouse slide and so on. Save.php is the address of the backend program after the edited information is finally submitted. Now see if the information in the table can be edited oh.
Jeditable also provides select,textarea type of editing and provides plug-in API interfaces.
To see the processing of the dropdown selection box select:

$ ('. Edit_select '). Editable (' save.php ', { 
  loadurl  : ' json.php ', 
  type   : "Select", 
}); 

Type Specifies the select type, and the data that is contained in the Select is from json.php,json.php provides the data source required for the Drop-down box.

$array [' old customers '] = ' old customers '; 
$array [' develop alone '] = ' develop alone '; 
$array [' partner '] = ' partner '; 
$array [' public relations '] = ' public relations '; 
$array [' exhibition '] = ' exhibition '; 
Print Json_encode ($array); 

This data is directly in the json.php file, and of course you can read the database information and generate JSON data about how to generate the JSON data, see. Another way is to specify data directly in editable:

$ ('. Edit_select '). Editable (' save.php ', { 
  data: "{' Old customer ': ' Old customer ', ' Development alone ': ' Development alone ', ' partner ': ' partner ', ' exhibition ': ' Exhibition '}" 
  , Type: "Select", 
}); 

It's not hard to see that the data in the above code is a string of JSON data.
TextArea type is no longer a majority, it is OK to change type to textarea. PS: The default type is text.
When dealing with date types, I have access to a jquery UI calendar plugin, and of course don't forget to introduce Juqery UI Plug-ins and styles:

<link rel= "stylesheet" type= "Text/css" href= "Css/jquery-ui.css"/> <script type= "Text/javascript" src= " 
Js/jquery-ui.js "></script> 

DatePicker Calendar plugin with jquery UI

$.editable.addinputtype (' DatePicker ', { 
  element:function (settings, original) { 
    var input = $ (' <input class = "input"/> '); 
    Input.attr ("ReadOnly", "ReadOnly"); 
    $ (this). append (input); 
    return (input); 
  }, 
  plugin:function (settings, original) { 
    var form = this; 
    $ ("input", this). DatePicker (); 
  } 
); 

The code invoked directly specifies that the type is datepicker.

$ (". DatePicker"). Editable (' save.php ', { 
  width   :), 
  type   : ' DatePicker ', 
  onblur  : " Ignore ", 
}); 

Now see if the date in the table with the "Deadline" field can be modified. Well, there are other additional plugins to look forward to your joining.
PHP
The edited field information is sent to the background program save.php program processing. Save.php needs to do is to receive the field information data submitted by the front-end, and to filter and verify the necessary, and then update the corresponding field contents in the datasheet, and return the results.

Include_once ("connect.php"); Connect the database 
$field =$_post[' id '];//Get the front-end field name 
$val =$_post[' value ';//get the contents of the field submitted by the front end 
$val = Htmlspecialchars ($val, ent_quotes); Filtering processing content 
 
$time =date ("y-m-d h:i:s");//Get system Current time 
if (Emptyempty ($val)) { 
  echo "cannot be empty"; 
} else{ 
  //update field information 
  $query =mysql_query ("Update customer set $field = ' $val ', modifiedtime= ' $time ' where id=1"); 
  if ($query) { 
    echo $val; 
  } else{ 
    echo "Data error"; 
  } 
} 

And then back to the beginning of the HTML code, the table displayed in the field content information is certainly read from the database, so to use PHP to read the data table, the content displayed on the OK, detailed process everyone write a bar.
Thus, the editable form will be off. But not yet completed, about the validity of the input information validation issues after the article I will be attached, please pay attention to.

Hope that the small compilation of every article is helpful to everyone.