位置: 编程技术 - 正文
jQuery+PHP实现可编辑表格字段内容并实时保存
编辑：rootadmin推荐整理分享jQuery+PHP实现可编辑表格字段内容并实时保存，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
本例适用场景：当查看详细资料，如用户详情信息，发现其中某几个字段信息需要修改，可直接点击该字段内容进行修改，节约了用户时间，（传统的做法是进入一个编辑页面，列出所有编辑的字段信息，即使你只需要编辑其中一两个字段内容，然后点击提交）提高了WEB响应速度，从而提高了前端用户体验。
本例依赖jquery库，并基于插件，具有以下特点：实时编辑，后台实时响应，并即时完成局部刷新。可自定义输入表单类型，目前jeditable提供text,select,textarea类型。响应键盘的回车和ESC键。插件机制，本例提供与jquery ui的datepicker日历控件的整合。下面我们来一步步讲解实现过程。XHTML我们需要制作一个表格，如下：
这是一个用户信息的表格，从代码中可以发现响应的字段信息的td都给了一个class和id属性，并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的，这样做就是为了在编辑时让后台获取相应的字段信息，后面的PHP代码中会讲到。CSS
CSS渲染了表格样式，让表格看起来更舒服点。jQuery提到jquery，一定要记住在页面的<head>之间要引用jquery和jeditable插件
然后开始调用插件。
插件提供了很多属性和方法的调用。可以设置宽度，高度，按钮的文本信息，提交时的加载图片，鼠标滑上的提示信息等等。save.php是编辑后的信息最终提交的后台程序的地址。现在看看是不是表格中的信息可以编辑了哦。jeditable还提供了select，textarea类型的编辑，并提供插件api接口。来看下拉选择框select的处理：
type指定的是select类型，select里加载的数据来自json.php，json.php提供了下拉框所需的数据源。
这些数据是直接存在json.php文件里的，当然你也可以通过读取数据库信息，然后生成json数据，关于如何生成json数据，请查看。还有一种方法是直接在editable中指定data：
不难发现，其实上述代码中的data就是一串json数据。textarea类型就不再多数，将type类型改为textarea就可以了。PS：默认类型为text。当处理日期类型时，我接入了一个jquery ui的日历插件，当然别忘了要引入juqery ui插件和样式：
接入jquery ui的datepicker日历插件
调用的代码直接指定type类型为datepicker即可。
现在看看，表格中的“有限期”字段的日期是不是可以修改了。好了，还有其他更多的插件接入期待您的加入。PHP编辑好的字段信息会发送到后台程序save.php程序处理。save.php需要完成的工作是：接收前端提交过来的字段信息数据，并进行必要的过滤和验证，然后更新数据表中相应的字段内容，并返回结果。
再回到开始的HTML代码，表格中显示的字段内容信息当然是从数据库读取来的，所以要用PHP读取数据表，把内容显示出来就OK，详细过程大家自己写一个吧。如此，可编辑的表格就此收工。但是还不能完工，关于对输入信息的有效性的验证问题后面的文章我会陆续附上，敬请关注。
希望小编整理的每一篇文章都对大家有所帮助。
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解 想拖动页面上的层，完全可以用jQueryui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery
页面内容排序插件jSort使用方法 当页面列表内容很多的时候，我们可能需要将内容按照某个方式进行排序，比如按照字母或者大小等排序。本文将使用排序插件jSort来对页面内容进行排
jqTransform美化表单 jqTransform，是DFCEngineering写的一个jQuery的样式插件，用于美化表单元素，使用方便简单，能美化所有表单元素包括input，radio，textarea，select，checkbox。运
标签: jQuery+PHP实现可编辑表格字段内容并实时保存
本文链接地址:https://www.jiuchutong.com/biancheng/370394.html 转载请保留说明！上一篇：jQuery往返城市和日期查询实例讲解(jquery 设置和返回元素属性)
