一种实现TABLE多行同时编辑的方法技术

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

【技术实现步骤摘要】
—种实现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、提交表单完成相关增、删、改功能。本文档来自技高网...

【技术保护点】
一种实现TABLE多行同时编辑的方法，其特征在于：所述的编辑包括增加、修改、删除；所述的增加是增加一行数据，通过JS脚本动态在表格最后一行附加一行并设置相应输入框的属性值；所述的修改是修改一行数据，通过JS脚本获取当前行的要修改的值，然后通过脚本将相应能cell内的值替换成可input/>输入框，同时设置该输入框的属性值，并将原值赋给该输入框；所述的删除是删除一行数据，通过要删除的行id获取相应的row，然后通过JS将该行删除，同时将该行对象的id保存到隐藏域或利用AJAX直接删除；完成有关操作后提交表单完成编辑功能。

【技术特征摘要】
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对象，然后通过相应的索引来获取要修改的某列的文本...

【专利技术属性】
技术研发人员：齐兆勇，徐震宇，孙傲冰，季统凯，
申请(专利权)人：国云科技股份有限公司，
类型：发明
国别省市：广东;44