表单多条相同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=" 50px;">序号</th>

                        <th style=" 100px;">姓名</th>

                        <th style=" 80px;">性别</th>

                        <th style=" 100px;">年龄</th>

                        <th style=" 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部分:

 /**
   *   获取 项目主要参与人员信息 数据  participate
   */

  function participate_data() {
    let participate_data = [];
    for (let i = 0; i < $("#participate tr").length - 1; i++) {
      participate_data.push({
        id: $("#participate tr").eq(i + 1).find("th").eq(1).find("span").text(),
        name: $("#participate tr").eq(i + 1).find("th").eq(1).find("input").val(),
        gender: $("#participate tr").eq(i + 1).find("th").eq(2).find("select").val(),
        age: $("#participate tr").eq(i + 1).find("th").eq(3).find("input").val(),
        title: $("#participate tr").eq(i + 1).find("th").eq(4).find("select").val(),
        idcode: $("#participate tr").eq(i + 1).find("th").eq(5).find("input").val(),
        firmName: $("#participate tr").eq(i + 1).find("th").eq(6).find("input").val()
      });
    }
    return participate_data;
  }
　　

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

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