不难发现，其实上述代码中的data就是一串json数据。
textarea类型就不再多数，将type类型改为textarea就可以了。PS：默认类型为text。
当处理日期类型时，我接入了一个jquery ui的日历插件，当然别忘了要引入juqery ui插件和样式：
<link type="text/css" href="https://www.jb51.net/css/jquery-ui.css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery-ui.js"></script>
接入jquery ui的datepicker日历插件
$.editable.addInputType('datepicker', { element : function(settings, original) { var input = $('<input />'); input.attr("readonly","readonly"); $(this).append(input); return(input); }, plugin : function(settings, original) { var form = this; $("input",this).datepicker(); } });
调用的代码直接指定type类型为datepicker即可。
$(".datepicker").editable('save.php', { width : 120, type : 'datepicker', onblur : "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: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 "数据出错"; } }
再回到开始的HTML代码，表格中显示的字段内容信息当然是从数据库读取来的，所以要用PHP读取数据表，把内容显示出来就OK，详细过程大家自己写一个吧。
如此，可编辑的表格就此收工。但是还不能完工，关于对输入信息的有效性的验证问题后面的文章我会陆续附上，敬请关注。
希望小编整理的每一篇文章都对大家有所帮助。
您可能感兴趣的文章: