对于上面显示的这种多条数据的获取, 大概有两种思路: 自增 和 选择器+遍历.

1. 通过id自增或者name自增的方法, 用户点击"新增一条"按钮时, 新增加的元素的id或者name自动加1, 然后append, 通过id或者name获取元素的时候也让id或者name自动加1, 用户点击删除的时候id或者name自动减1, 上面的序号是通过其他方法渲染的, 会自动更新, 在这里不用管它, 现在逻辑上看上去好像没有问题了, 实际上问题很大, 假如用户从中间开始删除呢? 随便删几个又新增然后又删除又随便新增随便删除, 这样子的话id或者name不就全乱了吗? 通过id或者name获取元素的时候也无法正确获取, 不过可以规定用户只能从最后一个删除, 就像下面这样:

规定用户只能从最后一个删除, 前面的按钮禁用.

代码如下:

//  按钮禁用function updateButtonDisabled($del) {for (let i = 0; i < $del.length; i++) {$del.eq(i).css({ cursor: "pointer", color: "#eee", background: "#cc614b" });$del.eq(i).removeAttr("disabled");}for (let i = 0; i < $del.length - 1; i++) {$del.eq(i).css({ cursor: "not-allowed", color: "#666", background: "#C9C9C9" });$del.eq(i).attr("disabled", "disabled");}}
  // 在用户删除元素之后执行这行代码即可.updateButtonDisabled($("#participate button:contains('删除')"));
 
 

虽然这样id或者name有序了, 但是可能会让用户不愉快, 万一用户很任性想删哪个删哪个呢?

万一用户想删第一个呢? 岂不是得全部删完? 很不人性化, 于是有了第二个方法: 选择器+遍历.

选择器+遍历的方法不用关心用户的输入过程, 只需要知道最终结果.

直接看代码:

HTML部分:

<table class="zp-table" id="participate" style="text-align: center; "><tbody><tr class="zp-bfinput"><th style="width: 50px;">序号</th><th style="width: 100px;">姓名</th><th style="width: 80px;">性别</th><th style="width: 100px;">年龄</th><th style="width: 100px;">职称</th><th>身份证号</th><th>所属单位</th><th>操作</th></tr><tr><th>1</th><th><input type="text" id="participate-name0" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><select id="participate-gender0" lay-verify="required" lay-ignore=""><option value=""></option><option value="男">男</option><option value="女">女</option></select></th><th><input type="number" id="participate-age0" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><select id="participate-title0" lay-verify="required" lay-ignore=""><option value=""></option><option value="初级">初级</option><option value="中级">中级</option><option value="副高">副高</option><option value="高级">高级</option></select></th><th><input type="text" id="participate-idcode0" placeholder="请输入" autocomplete="off" lay-verify="identity" class="zp-input"></th><th><input type="text" id="participate-firmName0" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><button class="btn btn-delete participate-del" type="button" style="cursor: not-allowed; color: rgb(102, 102, 102); background: rgb(201, 201, 201);" disabled="disabled">删除</button></th></tr><tr><th>2</th><th><input type="text" id="participate-name1" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><select id="participate-gender1" lay-verify="required" lay-ignore=""><option value=""></option><option value="男">男</option><option value="女">女</option></select></th><th><input type="number" id="participate-age1" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><select id="participate-title1" lay-verify="required" lay-ignore=""><option value=""></option><option value="初级">初级</option><option value="中级">中级</option><option value="副高">副高</option><option value="高级">高级</option></select></th><th><input type="text" id="participate-idcode1" placeholder="请输入" autocomplete="off" lay-verify="identity" class="zp-input"></th><th><input type="text" id="participate-firmName1" placeholder="请输入" autocomplete="off" lay-verify="required" class="zp-input"></th><th><button class="btn btn-delete participate-del" type="button" style="cursor: pointer; color: rgb(238, 238, 238); background: rgb(204, 97, 75);">删除</button></th></tr></tbody></table>

js部分:

 1  /**
 2    *   获取 项目主要参与人员信息 数据  participate
 3    */
 4
 5   function participate_data() {
 6     let participate_data = [];
 7     for (let i = 0; i < $("#participate tr").length - 1; i++) {
 8       participate_data.push({
 9         id: $("#participate tr").eq(i + 1).find("th").eq(1).find("span").text(),
10         name: $("#participate tr").eq(i + 1).find("th").eq(1).find("input").val(),
11         gender: $("#participate tr").eq(i + 1).find("th").eq(2).find("select").val(),
12         age: $("#participate tr").eq(i + 1).find("th").eq(3).find("input").val(),
13         title: $("#participate tr").eq(i + 1).find("th").eq(4).find("select").val(),
14         idcode: $("#participate tr").eq(i + 1).find("th").eq(5).find("input").val(),
15         firmName: $("#participate tr").eq(i + 1).find("th").eq(6).find("input").val()
16       });
17     }
18     return participate_data;
19   }  

这样的话不管用户中间过程怎么弄, 都可以正确获取到数据...

就像求重力对某物体做的功, 只要知道该物体在重力方向上的位移, 然后乘以mg就可以了, 而不需要知道物体的中间过程是如何移动的.

转载于:https://www.cnblogs.com/zp106/p/11427493.html

表单多条相同name数据的获取相关推荐

  1. R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称、将数据写入Excel文件新的表单(sheet)中、将文件保存为xls文件格式(而不是xlsx)

    R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称.将数据写入Excel文件新的表单(sheet)中.将文件保存为xls文件格式(而不是xlsx) 目录

  2. 前端:简述表单提交前如何进行数据验证

    前端:简述表单提交前如何进行数据验证 通常在提交表单数据时,我们会对数据进行验证,例如某些字段是必填字段,不能为空,这时应该如何做呢?有如下三种方法: 一.在button的submit事件进行判断 & ...

  3. form表单校验复杂系列--- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传

    form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传 前言 公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...

  4. 数字时代下表单产品设计中的数据研究

    导语:伴随着各行各业和人们生产生活中出现的数据化转型趋势,数据设计显得愈发重要.这篇文章主要讨论了数据的概念.分类,以及数据与指标的关系,在表单产品中数据设计的注意事项.推荐对表单设计感兴趣的同学阅读 ...

  5. form表单input使用disabled后提交不能获取表单值的解决方法

    今天遇到一个问题:在form表单中的input上使用disabled禁用标致,会导致表单提交时获取不到值.经过调试,以及参考相关博文,最终得以解决,下面记录解决方法. form表单输入框input设置 ...

  6. form + iframe 获取表单提交后返回的数据

    原理: submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了: 原文地址: http://blog.csdn.net/simeng_1016/articl ...

  7. Vue表单类的父子组件数据传递示例_vue.js_脚本之家

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...

  8. ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  9. uniapp 表单提交图片跟其他填写数据_记录第一次实现表单数据提交到数据库

    经过几周的Web前端学习我初步对.html文件.php文件有了一定的了解.首先我们来复习一下学过的知识.HTML页面实际上就是静态的网页页面,我们可以用html+css(层叠样式表)来创作出具有不同格 ...

最新文章

  1. 谁说只有VGG才能做风格迁移,ResNet也可以
  2. windows8.1如何分盘
  3. 第六节:深究事务的相关性质、隔离级别及对应的问题、死锁相关
  4. atoi(),函数,将字符串转为整形数字
  5. 大数据工具使用——安装Hadoop(多台服务器)和Hive、Hbase
  6. c语言以空格分割字符串,C语言程序要读入一行文本,以空格分隔若干个单词,以‘.’结束。你要输出这行文本中每个单词的长度。...
  7. Android11.0(R) MTK user版本打开MtkLog功能
  8. X61的intel wireless 3945abg 不再掉线了
  9. P1967 货车运输( 最大生成树+LCA or Kruskal重构树)
  10. 2D和3D的对比,不用犹豫,三维设计是行业未来必然趋势!
  11. 2023考研数学真题及答案解析!
  12. python快速实现NPV净现值计算
  13. 话费充值 php,首信易支付,电话费充值接口
  14. 小学计算机教师面试试题及答案,2019上半年小学信息技术教师资格面试真题及答案(第一批)...
  15. linux strace 源码,strace-4.3.rar
  16. 百度2013年度搜索风云榜发布
  17. 夜幕神话TelesLi
  18. 中国人事信息管理系统故障处理
  19. 网站显示不出来,怎么排查?
  20. 淮北师范大学计算机学院王涵,计算机科学与技术学院2020届毕业生冬季双选会邀请函...

热门文章

  1. php单例模式代码,php设计模式之单例模式代码
  2. python 构造函数传参_C++和python混合编程之在python类构造函数中传参方法
  3. linux7保存防火墙规则,centos7中没有service iptables save指令来保存防火墙规则
  4. java中typeof_深入剖析JavaScript中的数据类型判断(typeof instanceof prototype.constructor)...
  5. caffe︱Pascal VOC 2012 Multilabel Classification Model
  6. Windows和Mac下获取(当前)进程内存占用
  7. Linux的哲学思想
  8. [记录] Ubuntu 配置Apache虚拟站点
  9. SNMP学习(2)——SNMP实战
  10. oracle数据库的重复数据处理