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

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

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

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

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

然后开始调用插件。

?
不难发现，其实上述代码中的data就是一串json数据。
textarea类型就不再多数，将type类型改为textarea就可以了。PS：默认类型为text。
当处理日期类型时，我接入了一个jquery ui的datepicker日历插件，当然别忘了要引入juqery ui插件和样式：
?
接入jquery ui的datepicker日历插件
?
调用的代码直接指定type类型为datepicker即可。
include_once("connect.php"); //连接数据库 $field=$_POST['id'];  //获取前端提交的字段名 $val=$_POST['value']; //获取前端提交的字段对应的内容 $val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容  $time=date("Y-m-d H:i:s"); //获取系统当前时间 if(empty($val)){     echo "不能为空"; }else{     //更新字段信息     $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");     if($query){        echo $val;     }else{        echo "数据出错";         } } 
?
再回到开始的HTML代码，表格中显示的字段内容信息当然是从数据库读取来的，所以要用PHP读取数据表，把内容显示出来就OK，详细过程大家自己写一个吧。
?
如此，可编辑的表格就此收工。但是还不能完工，关于对输入信息的有效性的验证问题我还在研究，后面的文章我会陆续附上，敬请关注，也期待各位朋友的加入。
?
来源：helloweba.com :? http://www.helloweba.com/view-search-74.html
?
参考：
1. http://www.appelsiini.net/projects/jeditable
2. http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
3. http://blog.yoren.info/2008/05/jquery-%E7%94%A8jeditable%E5%BF%AB%E9%80%9F%E6%9B%B4%E6%96%B0mysql%E8%B3%87%E6%96%99/
?
?
?
?

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

热点推荐