表单多条相同name数据的获取
对于上面显示的这种多条数据的获取, 大概有两种思路: 自增 和 选择器+遍历.
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就可以了, 而不需要知道物体的中间过程是如何移动的.
