位置: 编程技术 - 正文

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随意拖动层并即时保存拖动位置实例讲解

  • 个人所得税如何查询工资
  • 应收账款和应付账款的关系
  • 企业收到股利分红如何缴税
  • 资产减值损失影响利润吗
  • 财务章备案和不备份区别
  • 离职补偿金入账
  • 可转换债券含义
  • 个人所得税核定征收税率表
  • 一般纳税人旧货
  • 税控发票包括哪些
  • 代别的公司付款怎么做账
  • 企业购买原材料,货款未支付
  • 小规模纳税人补缴增值税
  • 水利基金的计税基础是什么
  • 未办预售证,企业取得这笔收入要缴增值税吗?
  • 房地产土地增值税筹划
  • 电子承兑汇票怎么打印出来
  • 车船税计入什么费用
  • 合伙企业累进税率
  • 中国每年森林火灾造成的损失
  • 一般纳税人所得税2023年税率
  • 公司付电费发票怎么做账
  • 现金收付业务流程图
  • 没有认缴到位的股票
  • 基本户往一般户转账用途怎么写
  • 苹果手机zm
  • 计提工资社保公式是什么
  • 公司产生的劳务费如何计算个人所得税
  • 运输公司转包业务怎么开票
  • u启动u盘怎么装系统
  • 系统之家的系统免费吗
  • win10开机强制进入修复模式
  • vue实战技巧
  • thinkphp6开发
  • php中的pdo
  • php运用
  • PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
  • 个税返还的会计处理
  • 增值税专用发票进项
  • 汇算清缴退税分录怎么写
  • mongodb数据库中使用哪个数据库可以设置用户名和密码
  • 详解帝国cms图集大全
  • 非正常户是黑名单吗
  • 携程 海外
  • 是不是所有的发票都是一样的
  • sql server删除表命令
  • 开专用发票可以直接写加工费这个明细吗?
  • 出差补助是否计入工资总额
  • 隔月发票退回是怎么回事
  • 库存商品怎么计提坏账
  • 公司向个人租赁房屋办公要交税吗?
  • 财务费用结转时会计分录
  • 公司租赁个人车辆租金多少合适
  • 跨月报销的凭证有哪些
  • 贷款服务可以抵扣进项税额吗
  • 2020年工伤赔偿标准表
  • 应收账款周转天数越大说明什么
  • 材料物资核算应由谁负责
  • sql 判断数据是否存在
  • sqlserver模糊查询不用like
  • mysql获取日期年份
  • 怎么防止win10
  • wind10手机
  • fedora19
  • win8个性化设置
  • win7运行窗口在哪
  • linux系统的安装和常用命令
  • windows如何编辑内容
  • 六个自由
  • opengl英文
  • jquery刷新局部页面
  • glGenTextures(GLsizei n, GLuint *textures)函数说明
  • iframe内容自适应缩放
  • nodejs跳转到指定页面
  • js array insert
  • 安卓开发上下滑动功能界面
  • 面向对象的java语言
  • 简述python语言
  • 三代手续费退还银行网点变更怎么办
  • 代理记账资质办理在哪个网站提交申请
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设