jQuery+PHP implements the method of editing tables and saving them-JS Tutorial-php.cn

This time I will bring you the jQuery PHP method of editing a table and saving it. What are the precautions for the jQuery PHP method of editing a table and saving it? The following is a practical case, let’s take a look.

In this example, we will use jQuery to turn a text information into an editable form with one click. You can edit the text content and then click the "OK" button, and the new content will be sent to The background PHP program processes and saves it to the database; when the "Cancel" button is clicked, the page returns to the initial state. Friends in need can refer to the following

Applicable scenarios of this example: When viewing detailed information, such as user details , if you 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 time. (The traditional method is to enter an editing page and list all the edited field information, even if you only need to edit one of them. Two fields of content, and then click Submit) improves the WEB response speed, thus improving the front-end user experience.

This example relies on the jquery library and is based on plug-ins. It has the following characteristics: 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 Enter and ESC keys of the keyboard.
Plug-in mechanism, this example provides integration with the datepicker calendar control of jquery ui.
Let’s explain the implementation process step by step.

XHTMLWe 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>

Copy after login

This is a form of user information. From the code, we can find that the td of the response field information is given a class and id attribute and assign 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; }

Copy after login

CSS renders the table style to make the table look more comfortable.

jQueryWhen it comes to jquery, you must remember to quote jquery and the jeditable plug-in between the of the page

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

Copy after login

and 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  : '单击可以编辑...' 
   }); 
});

Copy after login

The plug-in provides many

properties 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 the drop-down selection box select:

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

Copy after login

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

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

Copy after login

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", 
});

Copy after login

It is not difficult to find that in fact, the data in the above code is 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>

Copy after login

Connect to the jquery ui datepicker calendar plug-in

The code called by

$.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(); 
  } 
});

Copy after login

can directly specify the type as datepicker.

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

Copy after login

Now let’s see if the date of the “limited period” field in the table can be modified. Well, there are more plug-in connections waiting for you to join.

PHPThe 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 "数据出错"; 
  } 
}

Copy after login

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 read the detailed process. Write one yourself.

In this way, the editable table is finished. 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 believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!