位置: 编程技术 - 正文

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的处理:

jQuery+PHP实现可编辑表格字段内容并实时保存

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 设置和返回元素属性)

下一篇:PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

  • 建筑企业简易计税和一般计税分开核算
  • 普通发票忘记开数量和单价可以用吗
  • 公司账户转到对方账户
  • 购进货物用于建造厂房可以抵扣增值税吗
  • 税后是含税还是不含税的意思
  • 法人分配利润分录
  • 增值税不允许抵扣的27种情况
  • 会计凭证保管的含义及要求
  • 存在弃置费用的固定资产有哪些
  • 费用暂估入账
  • 个人所得税申报是什么意思?
  • 销售款的印花税是按含税还是不含税价款申报?
  • 差旅费未及时报销说明怎么写
  • 印花税计提和缴纳凭证
  • 酒店固定资产明细表范本
  • 补缴的增值税可以计入以前年度损益调整
  • 房屋的折旧年限一般是多少年
  • 其它综合收益算利润吗
  • 其他权益工具投资公允价值变动怎么计算
  • 鸿蒙超级终端搜不到
  • 微软输入法中文输入卡顿
  • 企业生产过程中的一个安全问题必须
  • 非营利组织一般纳税人会计准则
  • 认证未抵扣的发票购买方能开红字信息表吗
  • centos apache配置文件
  • 最贵的苹果4
  • php jsondecode
  • 如何补办二手车牌照
  • 全球矿业巨头力拓集团
  • php docblocker
  • 政府补贴款计入什么科目是否纳税
  • 什么的利息收入可免纳个人所得税
  • php框架运行机制
  • 电子承兑可以提前贴现吗
  • 原生js实现promise
  • 用友软件怎么删除已经建立的账套
  • css 自定义变量
  • 2021高频前端面试题汇总
  • 深入理解php类的知识
  • js中的数组
  • mysql外键约束的基本语法结构
  • mongodb数据库操作遇到的问题和解决方案
  • python copyto
  • 哪些发票可以抵扣?
  • sqlserver2008导出表结构和表数据
  • sqlserver2016维护计划
  • mysql数据库环境
  • 开出咨询费发票应该注册什么企业?
  • 企业支付宝扣费
  • 汽车销售公司代购汽车有风险吗
  • 班车租赁发票税率是多少
  • win7系统管理在哪
  • win8.1打开软件显示Error远程配置获取失败请重新启动
  • 苹果电脑mac系统怎么升级
  • win8系统设置
  • mac os常用快捷键
  • win8怎么打开管理员命令提示符
  • image driver
  • xp系统怎么禁止启动项
  • linux连接windows的服务redis
  • win8安装ie11
  • cocos lua教程
  • js类的实现
  • 狗刨好学吗
  • 关于中秋节的古诗
  • css兼容浏览器
  • python爆破脚本
  • js简单实现鼠标移动后面文字也移动
  • 基于jquery的移动端ui框架
  • jquery 列表实现
  • android基本控件使用方法
  • javascript面向对象编程
  • 河南居民医保网上缴费查询
  • 北京孩子社保网上怎么缴费
  • 个人所得税如何申报详细流程
  • 邮政银行开税票要什么材料
  • 烟草什么品牌好
  • 企业对税务局建议
  • 预缴的税额可以用留底抵扣吗
  • 甘肃税务政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设