jQuery PHP implements editable table field content and saves it in real time_jquery

This example is applicable to the scenario: when viewing detailed information, such as user details, and find that some of the field information needs to be modified, you can directly click on the field content to modify it, saving the user's time (the traditional method is to enter an editor page, lists all edited field information, even if you only need to edit one or two field contents, and then click submit), it improves the WEB response speed, thereby improving the front-end user experience.

This example relies on the jquery library and is based on plug-ins, with the following features:
Real-time editing, real-time response in the background, and instant partial refresh.
The input form type can be customized. Currently jeditable provides text, select, and textarea types.
Respond to the keyboard's Enter and ESC keys.
Plug-in mechanism, this example provides integration with the datepicker calendar control of jquery ui.
Below we will explain the implementation process step by step.
XHTML
We need to make a form as follows:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <thead> 
  <tr class="table_title"> 
   <td colspan="4"><span class="open"></span>客户信息</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td width="20%" class="table_label">姓名</td> 
   <td width="30%" class="edit" id="username">李小三</td> 
   <td width="20%" class="table_label">办公电话</td> 
   <td width="30%" class="edit" id="phone">021-12345678</td> 
  </tr> 
  <tr> 
   <td class="table_label">称谓</td> 
   <td class="edit" id="solutation">先生</td> 
   <td class="table_label">手机</td> 
   <td class="edit" id="mobile">13800138000</td> 
  </tr> 
  <tr> 
   <td class="table_label">公司名称</td> 
   <td class="edit" id="company">常丰集团</td> 
   <td class="table_label">电子邮箱</td> 
   <td class="edit" id="email">lrfbeyond@163.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">潜在客户来源</td> 
   <td class="edit_select" id="source">公共关系</td> 
   <td class="table_label">有限期</td> 
   <td class="datepicker" id="sdate">2011-11-30</td> 
  </tr> 
  <tr> 
   <td class="table_label">职位</td> 
   <td class="edit" id="job">部门经理</td> 
   <td class="table_label">网站</td> 
   <td class="edit" id="web">www.helloweba.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">创建时间</td> 
   <td>2010-11-04 21:11:59</td> 
   <td class="table_label">修改时间</td> 
   <td id="modifiedtime">2010-11-05 09:42:52</td> 
  </tr> 
  <tr> 
   <td class="table_label">备注</td> 
   <td class="textarea" id="note" colspan="3">备注信息</td> 
  </tr> 
 </tbody> 
</table> 

This is a table of user information. From the code, you can find that the td of the response field information is given a class and id attribute and assigned a value. It is worth mentioning that the id value corresponding to td in the table corresponds one-to-one with the field name in the database. This is done to allow the background to obtain the corresponding field information during editing, which will be discussed in the PHP code 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 it comes to jquery, you must remember to quote jquery and jeditable plug-ins
between the of the page

<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   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
}); 

The plug-in provides many attributes and method calls. You can set the width, height, text information of the button, loading image when submitting, prompt information when the mouse slides over, etc. save.php is the address of the background program where the edited information is finally submitted. Now see if the information in the table can be edited.
Jeditable also provides select, textarea type editing, and provides a plug-in API interface.
Let’s look at the processing of drop-down selection box selection:

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  type   : "select", 
}); 

type specifies the select type. The data loaded in select comes from json.php. json.php provides the data source required for the drop-down box.

$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array); 

These data are stored directly in the json.php file. Of course, you can also read the database information and then generate json data. Please check out how to generate json data. Another method is to specify data directly in the editable:

$('.edit_select').editable('save.php', { 
  data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
  type : "select", 
}); 

It is not difficult to find that the data in the above code is actually a string of json data.
The textarea type is no longer the majority, just change the type type to textarea. PS: The default type is text.
When dealing with date types, I connected a jquery ui calendar plug-in. Of course, don’t forget to introduce the juqery ui plug-in and style:

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

Connect to the datepicker calendar plug-in of 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 calling code can directly specify the type as datepicker.

$(".datepicker").editable('save.php', { 
  width   : 120, 
  type   : 'datepicker', 
  onblur  : "ignore", 
}); 

Now see if the date of the "Limited Period" field in the form can be modified. Well, there are many other plug-ins waiting for your joining.
PHP
The edited field information will be sent to the background program save.php program for processing. The work that save.php needs to complete is: receive the field information data submitted by the front end, perform necessary filtering and verification, then update the corresponding field content in the data table, and return the results.

include_once("connect.php"); //连接数据库 
$field=$_POST['id']; //获取前端提交的字段名 
$val=$_POST['value']; //获取前端提交的字段对应的内容 
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容 
 
$time=date("Y-m-d H:i:s"); //获取系统当前时间 
if(emptyempty($val)){ 
  echo "不能为空"; 
}else{ 
  //更新字段信息 
  $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
  if($query){ 
    echo $val; 
  }else{ 
    echo "数据出错"; 
  } 
} 

Go back to the HTML code at the beginning. The field content information displayed in the table is of course read from the database, so you need to use PHP to read the data table and display the content. You can write the detailed process yourself. .
This concludes the editable form. But it is not finished yet. I will attach subsequent articles on the verification of the validity of the input information, so stay tuned.

I hope every article compiled by the editor will be helpful to everyone.