可编者的表格：jQuery+PHP实现实时编辑表格字段内

可编者的表格：jQuery+PHP实现实时编辑表格字段内容

可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

?

在本例中，我们会通过jQuery实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”按钮，新的内容将发送到后台PHP程序处理，并保存到数据库；当点击“取消”按钮，则页面恢复到初始状态。

?

本例适用场景：当查看详细资料，如用户详情信息，发现其中某几个字段信息需要修改，可直接点击该字段内容进行修改，节约了用户时间，（传统的做法是 进入一个编辑页面，列出所有编辑的字段信息，即使你只需要编辑其中一两个字段内容，然后点击提交）提高了WEB响应速度，从而提高了前端用户体验。

?

本例依赖jquery库，并基于jeditable插件，具有以下特点：

• 实时编辑，后台实时响应，并即时完成局部刷新。
• 可自定义输入表单类型，目前jeditable提供text,select,textarea类型。
• 响应键盘的回车和ESC键。
• 插件机制，本例提供与jquery ui的datepicker日历控件的整合。

下面我们来一步步讲解实现过程。

?

XHTML

我们需要制作一个表格，如下：

 
  
 
    
 
      
客户信息
 
    
 
  
 
  
 
    
 
      
姓名
 
      
李小三
 
      
办公电话
 
      
021-12345678
 
    
 
    
 
      
称谓
 
      
先生
 
      
手机
 
      
13800138000
 
    
 
    
 
      
公司名称
 
      
常丰集团
 
      
电子邮箱
 
      
lrfbeyond@163.com
 
    
 
    
 
      
潜在客户来源
 
      
公共关系
 
      
有限期
 
      
2011-11-30
 
    
 
    
 
      
职位
 
      
部门经理
 
      
网站
 
      
www.helloweba.com
 
    
 
    
 
      
创建时间
 
      
2010-11-04 21:11:59
 
      
修改时间
 
      
2010-11-05 09:42:52
 
    
 
    
 
      
备注
 
      
备注信息
 
    
 
  
 
 

?

这是一个用户信息的表格，从代码中可以发现响应的字段信息的td都给了一个class和id属性，并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的，这样做就是为了在编辑时让后台获取相应的字段信息，后面的PHP代码中会讲到。

?

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渲染了表格样式，让表格看起来更舒服点。

?

jQuery

提到jquery，一定要记住在页面的之间要引用jquery和jeditable插件