jQuery实现可编辑的表格

简介:

从数据库中获取的数据在浏览器页面上以表格的形式显示,通过对显示的表格中的信息进行编辑然后在重新提交给数据库,这对于修改数据非常方便。

 使用jQuery实现可编辑的表格:
 
 在页面上显示数据,采用表格显示输出;在表格中的某一个格子上单击后,可以对该单元格中的数据进行修改编辑,然后确认修改结果,并且存储到数据库中去。


 
1.       实现步骤:
a)         首先实现页面编辑效果,即可以通过单击单元格之后可以编辑
b)        页面编辑完成之后,利用Ajax效果存储到数据库中
2.       实现页面效果
a)         利用文本框实现对表格的编辑
b)        单击单元格,将单元格中的值存在一个变量Val
c)        向单元格中添加以个文本框
d)        将存储在变量Val中的值赋给文本框
e)         修改文本框中的内容
f)         将文本框中的内容在次存储在变量Val
g)        删除单元格中的文本框
h)        将存储在变量Val中的值写回单元格
i)          这样就实现了单元格的编辑
3.       对文本框的事件处理
a)         文本框的单击事件禁用
b)        文本框失去焦点后应该删除文本框,并且将文本框中的值写回单元格
4.       实现操作无痕迹的页面效果显示
a)         文本框的背景颜色和单元格的背景颜色相同
b)        文本框不设置边框
 
c)          文本框的宽度和单元格的宽度一致
未进行样式设置如图:这样可以看到操作实现。
 

 

进行样式设置后,就看不到操作的实现过程。



本文转自 secondriver 51CTO博客,原文链接:http://blog.51cto.com/aiilive/881405,如需转载请自行联系原作者

相关文章
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
52 0
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
54 0
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
63 0
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
173 0
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
50 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
366 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
371 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
308 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
562 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
282 0
【jquery ajax】实现文件上传提交