这个例子适用于这样的场景：查看详细信息，比如用户详细信息，发现有些字段需要修改，可以直接点击字段的内容进行修改，节省了用户的时间。(传统的方法是进入一个编辑页面，列出所有编辑过的字段，即使只需要编辑一两个字段，然后点击提交即可)，提高了WEB响应速度，从而提升了前端用户体验。

这个例子依赖于jquery库，并且基于插件。它具有以下特点：实时编辑、后台实时响应、即时本地刷新。您可以自定义输入表单类型。目前，jeditable提供文本、选择和文本区域类型。响应键盘的回车键和ESC键。插件机制，这个例子提供了与jquery ui的datepicker日历控件的集成。让我们一步一步解释实现。我们需要制作一个表格，如下所示：

表格宽度=' 100% '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 '表格类别=' table _ title ' tdcolspan=' 4 ' span类别=' open'/span客户信息/td /tr/Ad tbody tr TD宽度=' 20% '类别=' table _ label '名称/TD TD TD宽度=' 30% '类别=' edit' id=' username '李小三/TD TD宽度=' 20% '类别=' table _ label '办公室电话号码/TD width=' 30% ' class=' edit ' id=' phone ' 021-12345678/TD/tr TD class=' table _ label ' title/TD TD TD TD class=' edit ' id=' solutation '老师/Td class=' table _ label '手机/TD class=' edit ' id=' mobile ' 13800138000/TD/tr tr TD class=' table _ label '公司名称/td td class='edit' id='company '长丰集团/Td类=' table _ label '电子邮件/Td类=' edit ' id=' email '[email protected]/td/Tr TD类=' table _ label '潜在客户来源/TD类=' edit _ select' id=' source '公关/TD类='table_label '限时/TD类='日期选取器' id=' sdate' 2011-11-30/TD/Tr TD类=' table _ label '职位/TD TD类='edit' id='job '部门经理/TD Tr TD class=' table _ label '创建时间/TD TD 2010-11-04 21:11336059/TD TD TD class=' table _ label '修改时间/TD TD TD ID='修改时间' 2010-11-05 09:42:52/Td/tr tr TD class=' table _ label '备注/TD TD class=' textarea ' ID=' note ' colspan=' 3 '备注信息/Td /tr 从代码中可以发现，响应中的字段信息的TD被赋予了一个类和id属性并被赋予了一个值。值得一提的是，表中td对应的id值与数据库中的字段名称一一对应，这样后台在编辑时就可以获得对应的字段信息，后面的PHP代码中会提到。半铸钢钢性铸铁(Cast Semi-Steel)

表{ width :96%；margin:20px汽车；边框塌陷：}表格TD { line-height :26 px；padding:2px左填充：8 px；border:1px实心# b6d6e6} .table _ title { height:26px线高：26 px；background : URL(BTN _ BG . gif)repeat-x底部；font-weight : bold；text-indent :3 em；outline:0} .table _ label { background : # e8f 5fe；text-align : right；} CSS渲染表格样式，使表格看起来更舒适。Jquery指的是jquery，所以记得在页面头部之间要参考jQuery和jeditable插件。

脚本类型=' text/JAVAScript ' src=' http : js/jquery . js '/script script类型=' text/JAVAScript ' src=' http 3360 js/jquery . jeddile . js '/脚本，然后开始调用插件。

$ (function () {$(')。编辑')。可编辑(' save.php '，{width :120，height :18，//onblor : '忽略'，cancel3360 '取消'，submit : '确定'，Indicator : ' img src=' http : loader . gif '，tooltip : '点击编辑.'});});插件提供了对属性和方法的许多调用。可以设置按钮的宽度、高度、文字信息、提交时加载图片、滑动鼠标时提示信息等等。Save.php是最终提交编辑信息的后台程序的地址。现在看看表中的信息是否可以编辑。Jeditable还提供对select和textarea类型的编辑，并提供插件api接口。查看下拉选择框的处理选择：

$('.编辑_选择')。可编辑(' save.php '，{ loadurl : 'json.php '，键入： 'select '，})；类型指定选择类型，选择中加载的数据来自json.php，json.php提供下拉框所需的数据源。

$array['老客户']='老客户'；$array['独立开发']='独立开发'；$ array[' partner ']=' partner '；$array['公关']='公关'；$ array[' exhibit ']=' exhibit '；print JSON _ encode($ array)；这些数据直接存储在json.php文件中。当然，您也可以读取数据库信息，然后生成json数据。请检查如何生成json数据。另一种方法是直接在可编辑中指定数据：

$ ('.编辑_选择')。可编辑(' save.php '，{data: ' ' '老客户' : '老客户'，'自主开发' : '自主开发'，'合作伙伴' : '合作伙伴'，'展会' :不难发现，上述代码中的数据实际上是一串json数据。Textarea类型不再是大多数，因此将类型更改为textarea。PS:默认类型是文本。在处理日期类型时，我访问了jquery ui的一个日历插件。当然，别忘了介绍juqery ui插件和风格：

链接rel='样式表' type=' text/CSS ' href=' CSS/jquery-ui . CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery-ui . js '/脚本访问jquery ui的datepicker日历插件。

$ . editable . addinputtype(' dateppicker '，{ element : function(settings，original){ var input=$(' input class=' input '/')；input.attr('readonly '，' readonly ')；$(这个)。追加(输入)；返回(输入)；}，plugin :函数(设置，原始){ var form=this$(“输入”，这个)。datepicker()；} });调用代码直接指定类型为datepicker。

$('.datepicker’)。可编辑(' save.php '，{ width : 120，type : 'datepicker '，on bulr : ' ignore '，})；现在，让我们看看表中“截止日期”字段的日期是否可以修改。好的，还有很多其他的插件访问期待你的加入。由PHP编辑的字段信息将被发送到后台程序save.php进行处理。save.php需要做的是：接收前端提交的字段信息数据，过滤验证，然后更新数据表中对应的字段内容，返回结果。

include _ once(' connect . PHP ')；//连接数据库$ field=$ _ POST[' id ']；//获取前端提交的字段名$ val=$ _ POST[' value ']；//获取前端提交的字段对应的内容$ val=htmlspecialchars ($ val，ent _ quotes)；//筛选器处理内容$ time=date(' y-m-d h : I 3360s ')；//如果(emptyempty($val)){ echo '不能为空，则获取系统的当前时间；}else{ //更新字段信息$ query=MySQL _ query('更新客户集$ field=' $ val '，修改时间=' $ time '，其中id=1 ')；if($ query){ echo $ val；}else{ echo“数据错误”；}}回到开头的HTML代码，表中显示的字段内容信息当然是从数据库中读取的，所以用PHP读取数据表并显示内容就可以了。请自己写一个详细的过程。这样，可编辑表单就完成了。但是还不能完成。我会陆续附上以下关于验证输入信息有效性的文章，敬请关注。

希望边肖整理的每一篇文章对大家都有帮助。