Editable Table: jQuery + PHP enables real-time editing of table field content

Editable Table: How does jQuery + PHP implement real-time editing of table fields? In this example, we click jQuery to change the text information to an editable form. you can edit the text content and click "OK, the new content will be sent to the backend PHP program for processing and saved to the database. when you click the "cancel" button, the page will be restored to an editable Table: jQuery + PHP to edit the table field content in real time

?

In this example, we click jQuery to change the text information to an editable form. you can edit the text content and click "OK, the new content will be sent to the backend PHP program for processing and saved to the database. when you click "cancel", the page is restored to the initial state.

?

This example is applicable to the following scenarios: when you view detailed information, such as user details, and find that the information of a certain field needs to be modified, you can click the content of this field to modify it, saving the user time, (the traditional approach is to enter an editing page to list all the edited field information, even if you only need to edit one or two fields and then click Submit.) this increases the WEB response speed, this improves the front-end user experience.

?

This example depends on the jquery library and is based on the jeditable plug-in. it has the following features:

• Real-time editing, real-time response in the background, and real-time partial refresh.
• The input form type can be customized. Currently, jeditable provides the text, select, and textarea types.
• Return the carriage return and ESC keys of the keyboard.
• Plug-in mechanism. this example provides integration with the datepicker calendar control of jquery ui.

Next we will explain the implementation process step by step.

?

XHTML

Create a table as follows:

 
 
   
  
  
 
   
 
    
Customer information
 
   
 
  
   
  
  
 
   
 
    
Name
 
    
Li Xiaosan
 
    
Office phone number
 
    
021-12345678
 
   
 
   
 
    
Title
 
    
Sir
 
    
Mobile phone
 
    
13800138000
 
   
 
   
 
    
Company name
 
    
Changfeng Group
 
    
Email
 
    
Lrfbeyond@163.com
 
   
 
   
 
    
Potential customer source
 
    
Public relations
 
    
Deadline
 
    
2011-11-30
 
   
 
   
 
    
Position
 
    
Department manager
 
    
Website
 
    
Www.helloweba.com
 
   
 
   
 
    
Creation time
 
    
21:11:59
 
    
Modification time
 
    
09:42:52
 
   
 
   
 
    
Remarks
 
    
Remarks
 
   
 
  
 
 
 
 

?

This is a table of user information. from the code, we can find that the td of the response field information has assigned a class and id attribute and assigned a value. It is worth mentioning that the id value corresponding to the td in the table is one-to-one correspondence with the field name in the database, so that the background can obtain the corresponding field information during editing, the PHP code will be discussed later.

?

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 to make the table look more comfortable.

?

JQuery

When talking about jquery, you must rememberBetween jquery and jeditable