CN104407853A - 一种实现table多行同时编辑的方法 - Google Patents

一种实现table多行同时编辑的方法 Download PDF

Info

Publication number
CN104407853A
CN104407853A CN201410624865.5A CN201410624865A CN104407853A CN 104407853 A CN104407853 A CN 104407853A CN 201410624865 A CN201410624865 A CN 201410624865A CN 104407853 A CN104407853 A CN 104407853A
Authority
CN
China
Prior art keywords
row
script
value
input frame
input
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201410624865.5A
Other languages
English (en)
Inventor
齐兆勇
徐震宇
孙傲冰
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201410624865.5A priority Critical patent/CN104407853A/zh
Publication of CN104407853A publication Critical patent/CN104407853A/zh
Pending legal-status Critical Current

Links

Abstract

本发明涉及软件技术开发技术领域，具体涉及一种实现TABLE多行同时编辑的方法。本发明通过JS脚本语言操作TABLE来解决集合数据List的编辑(增加、修改、删除)操作；增、删、改在同一个页面操作，无需将各个功能分开，且操作完成后一并提交，本发明有效解决了复杂业务系统的用户体验差的问题；可以用于TABLE的编辑操作上。

Description

一种实现TABLE多行同时编辑的方法
技术领域
本发明涉及软件技术开发技术领域，具体涉及一种实现TABLE多行同时编辑的方法。
背景技术
目前的业务系统不但越来越复杂而且用户体验要求也越来越高，如：用户在增加某行数据的时候，由于某种需求可能又要对某行数据进行修改或删除行的操作，通常情况下我们是针对不同的功能分不同页面来回切换进行操作，这样让用户觉得有些繁琐，操作不是很方便，用户体验度很差。
发明内容
本发明解决的技术问题在于提供一种实现TABLE多行同时编辑的方法，利用JS操作TABLE实现多行编辑操作。
本发明解决上述问题的方案是：
所述的编辑包括增加、修改、删除；
所述的增加是增加一行数据，通过JS脚本动态在表格最后一行附加一行并设置相应输入框的属性值；
所述的修改是修改一行数据，通过JS脚本获取当前行的要修改的值，然后通过脚本将相应能cell内的值替换成<input/>输入框，同时设置该输入框的属性值，并将原值赋给该输入框；
所述的删除是删除一行数据，通过要删除的行id获取相应的row，然后通过JS将该行删除，同时将该行对象的id保存到隐藏域或利用AJAX直接删除；
完成有关操作后提交表单完成编辑功能。
所述的增加操作是：点击增加一行按钮，调用相应的插入方法，通过JS脚本获取表格的总row数，然后在表格的最后一行插入row，同时设置好每列的文本框的相关属性值以实现增加操作。
所述的修改某一行数据，是通过JS脚本将表格内的显示文本数据替换成<input/>输入框；即点击修改按钮触发相应的修改方法，同时将该行的id传过去，通过行的id获取表格的row对象，然后通过相应的索引来获取要修改的某列的文本值，再通过JS脚本利用innerHTML方法将相应的列替换成<input/>输入框，设置输入框的：name、id以及样式等相关属性，同时将该列的文本值带过去，使用户可以修改文本框的值来实现修改操作。
所述的删除某一行的数据是点击删除按钮触发相应的删除方法，同时将要删除的id传过去，首先通过JS脚本将相应di的row对象删除掉，由于是前端操作，可以利用ajax直接调用后台程序将数据库中的数据删除，也可以将要删除的对象的id存到隐藏字段内，等页面操作完成时一并提交，后台通过获取要删除的对象的id来执行删除操作。
本发明的有益效果是：由于增、删、改在同一个页面操作，无需将各个功能分开，且操作完成后一并提交，这样不仅增强了用户体验度更减轻频繁与服务器进行交互的性能损耗，由于是纯JS脚本实现，使得与各种浏览器可以无缝的对接，不存在浏览器兼容性的问题。
附图说明
下面结合附图对本发明进一步说明：
图1是本发明流程图；
图2是本发明的实际效果图。
具体实施方式
如图1、2所示，下面具体以编辑工作计划为例，讲述该方法的具体操作。
在编辑工作计划的操作中主要有以下操作：
1、修改某一行数据，实质上就是通过JS脚本将表格内的显示文本数据替换成<input/>输入框：点击修改按钮触发相应的修改方法，同进将该行的id传过去，通过行的id可以获取表格的row对象，然后通过相应的索引来获取要修改的某列的文本值，再通过JS脚本利用innerHTML方法将相应的列替换成<input/>输入框，设置输入框的相关属性如：name、id以及样式等，同时将该列的文本值带过去，这样用户就可以修改文本框的值来实现修改操作。
2、删除某一行的数据：点击删除按钮触发相应的删除方法，同时将要删除的id传过去，首先通过JS脚本将相应id的row对象删除掉，由于是前端操作，可以利用ajax直接调用后台程序将数据库中的数据删除，也可以将要删除的对象的id存到隐藏字段内，等页面操作完成时一并提交，后台通过获取要删除的对象的id来执行删除操作。
3、增加一行的操作：点击增加一行按钮，调用相应的插入方法，通过JS脚本获取表格的总row数，然后在表格的最后一行插入row，同时要设置好每列的文本框的相关属性值以实现增加操作。
4、提交表单完成相关增、删、改功能。

Claims (5)

1.一种实现TABLE多行同时编辑的方法，其特征在于：所述的编辑包括增加、修改、删除；
所述的增加是增加一行数据，通过JS脚本动态在表格最后一行附加一行并设置相应输入框的属性值；
所述的修改是修改一行数据，通过JS脚本获取当前行的要修改的值，然后通过脚本将相应能cell内的值替换成可input/>输入框，同时设置该输入框的属性值，并将原值赋给该输入框；
所述的删除是删除一行数据，通过要删除的行id获取相应的row，然后通过JS将该行删除，同时将该行对象的id保存到隐藏域或利用AJAX直接删除；
完成有关操作后提交表单完成编辑功能。
2.根据权利要求1所述的实现TABLE多行同时编辑的方法，其特征在于：所述的增加操作是：点击增加一行按钮，调用相应的插入方法，通过JS脚本获取表格的总row数，然后在表格的最后一行插入row，同时设置好每列的文本框的相关属性值以实现增加操作。
3.根据权利要求1所述的实现TABLE多行同时编辑的方法，其特征在于：所述的修改某一行数据，是通过JS脚本将表格内的显示文本数据替换成可input/>输入框；即点击修改按钮触发相应的修改方法，同时将该行的id传过去，通过行的id获取表格的row对象，然后通过相应的索引来获取要修改的某列的文本值，再通过JS脚本利用innerHTML方法将相应的列替换成可input/>输入框，设置输入框的：name、id以及样式等相关属性，同时将该列的文本值带过去,使用户可以修改文本框的值来实现修改操作。
4.根据权利要求2所述的实现TABLE多行同时编辑的方法，其特征在于：所述的修改某一行数据，是通过JS脚本将表格内的显示文本数据替换成可input/>输入框；即点击修改按钮触发相应的修改方法，同时将该行的id传过去，通过行的id获取表格的row对象，然后通过相应的索引来获取要修改的某列的文本值，再通过JS脚本利用innerHTML方法将相应的列替换成可input/>输入框，设置输入框的：name、id以及样式等相关属性，同时将该列的文本值带过去,使用户可以修改文本框的值来实现修改操作。
5.根据权利要求1至4任一项所述的实现TABLE多行同时编辑的方法，其特征在于：所述的删除某一行的数据是点击删除按钮触发相应的删除方法，同时将要删除的id传过去，首先通过JS脚本将相应id的row对象删除掉，由于是前端操作，可以利用ajax直接调用后台程序将数据库中的数据删除，也可以将要删除的对象的id存到隐藏字段内，等页面操作完成时一并提交，后台通过获取要删除的对象的id来执行删除操作。
CN201410624865.5A 2014-11-06 2014-11-06 一种实现table多行同时编辑的方法 Pending CN104407853A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410624865.5A CN104407853A (zh) 2014-11-06 2014-11-06 一种实现table多行同时编辑的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410624865.5A CN104407853A (zh) 2014-11-06 2014-11-06 一种实现table多行同时编辑的方法

Publications (1)

Publication Number Publication Date
CN104407853A true CN104407853A (zh) 2015-03-11

Family

ID=52645486

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410624865.5A Pending CN104407853A (zh) 2014-11-06 2014-11-06 一种实现table多行同时编辑的方法

Country Status (1)

Country Link
CN (1) CN104407853A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107291467A (zh) * 2017-06-20 2017-10-24 浪潮金融信息技术有限公司 自助终端的单据处理方法及装置、可读存储介质、终端
CN107515702A (zh) * 2016-06-16 2017-12-26 苏宁云商集团股份有限公司 一种页面交互方法及装置
CN109375977A (zh) * 2018-10-15 2019-02-22 郑州云海信息技术有限公司 一种实现页面表格编辑的方法及装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001088703A1 (en) * 2000-05-16 2001-11-22 Watterson-Prime Software, Inc. System for developing data collection software applications
CN101593186A (zh) * 2008-05-29 2009-12-02 阿里巴巴集团控股有限公司 可视化网站编辑方法及可视化网站编辑系统
CN102063306A (zh) * 2011-01-06 2011-05-18 夏春秋 一种通过电子表单进行应用开发的技术实现方法
CN102360296A (zh) * 2011-10-20 2012-02-22 北京金和软件股份有限公司 一种基于web的在线表单开发工具
CN102662654A (zh) * 2012-03-09 2012-09-12 北京神州数码思特奇信息技术股份有限公司 一种数据分页插件的生成方法
CN102841791A (zh) * 2012-07-12 2012-12-26 上海高洁信息科技股份有限公司 在线表单的生成方法及系统
CN103593456A (zh) * 2013-11-22 2014-02-19 中国技术交易所有限公司 表单自定义设计方法及装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001088703A1 (en) * 2000-05-16 2001-11-22 Watterson-Prime Software, Inc. System for developing data collection software applications
CN101593186A (zh) * 2008-05-29 2009-12-02 阿里巴巴集团控股有限公司 可视化网站编辑方法及可视化网站编辑系统
CN102063306A (zh) * 2011-01-06 2011-05-18 夏春秋 一种通过电子表单进行应用开发的技术实现方法
CN102360296A (zh) * 2011-10-20 2012-02-22 北京金和软件股份有限公司 一种基于web的在线表单开发工具
CN102662654A (zh) * 2012-03-09 2012-09-12 北京神州数码思特奇信息技术股份有限公司 一种数据分页插件的生成方法
CN102841791A (zh) * 2012-07-12 2012-12-26 上海高洁信息科技股份有限公司 在线表单的生成方法及系统
CN103593456A (zh) * 2013-11-22 2014-02-19 中国技术交易所有限公司 表单自定义设计方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
姚渝涛: "基于JQuery 对开源插件jgGrid 的功能应用", 《电脑编程技巧与维护 》 *
李敏: "一种基于AJAX的数据表管理方法", 《警察技术》 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107515702A (zh) * 2016-06-16 2017-12-26 苏宁云商集团股份有限公司 一种页面交互方法及装置
CN107515702B (zh) * 2016-06-16 2020-10-27 苏宁易购集团股份有限公司 一种页面交互方法及装置
CN107291467A (zh) * 2017-06-20 2017-10-24 浪潮金融信息技术有限公司 自助终端的单据处理方法及装置、可读存储介质、终端
CN109375977A (zh) * 2018-10-15 2019-02-22 郑州云海信息技术有限公司 一种实现页面表格编辑的方法及装置

Similar Documents

Publication Publication Date Title
US20180067976A1 (en) Allowing in-line edit to data table of linked data of a data store
WO2017028611A1 (zh) 一种表单实现方法及装置
CN104978317A (zh) 网页生成方法及装置、网站生成方法及建站服务器
CN106446292B (zh) 一种前端数据双向绑定的实现方法及装置
CN103389895A (zh) 一种前端页面的生成方法及系统
CN101359285B (zh) 一种将控件插入到文档里的装置和方法
CN106126489A (zh) 一种报告文件动态图表编辑方法及系统
CN112083920A (zh) 一种前端页面设计方法、装置、存储介质及设备
CN105389084A (zh) 一种移动终端方便用户进行信息输入的方法及移动终端
CN105867820A (zh) 用于触摸屏的文本编辑方法和装置
CN106066757A (zh) 一种移动终端app图文混排的方法及系统
CN106952114A (zh) 一种广告编辑定制方法、装置和广告编辑器
CN110738035A (zh) 一种文档模板生成方法及装置
JP2018501551A (ja) 数式処理方法、装置、デバイス及びプログラム
CN109308337A (zh) 页面分享方法和装置
CN115712413A (zh) 低代码开发方法、装置、设备及存储介质
CN103207918A (zh) 一种演示文稿的动画效果管理方法、系统及装置
CN104407853A (zh) 一种实现table多行同时编辑的方法
CN104834715A (zh) 一种基于部件和容器的网站生成方法及系统
CN107656933A (zh) 一种语音播报方法及装置
CN104320539A (zh) 一种在移动设备上通过模板快速输入的方法
CN103294463A (zh) 一种编辑系统及方法
CN108984156A (zh) 一种基于模板的免代码开发的软件自动生成方法及系统
CN115469849B (zh) 一种业务处理系统、方法、电子设备和存储介质
CN104424170A (zh) 一种电子内容数据包后处理系统和方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20150311