文档章节

jQuery实现可编辑的表格

secondriver
 secondriver
发布于 2015/09/17 09:26
字数 502
阅读 182
收藏 0

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

 使用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
粉丝 10
博文 229
码字总数 233821
作品 0
广州
程序员
私信 提问
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.5K
9
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.5K
10
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
541
1
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
398
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部