Shown above for obtaining such a plurality of data, about two approaches: the self-energizing and a selector + traversal.
1. increment by increment id or name of the method, when the user clicks on the "Add a 'button, id or name the newly added elements automatically incremented by 1, then append, or when the name acquired by id elements also allow id or automatic name 1, when the user clicks delete id or name decremented, the above number is rendered by other means, it will automatically update, do not ignore it here, and now it looks like there is no problem on logic, in fact, the problem great, if a user deletes start from the middle of it? has added several casually deleted then just delete and add just delete, then id or name like this whole mess would not it? id by name or time element also acquired unable to get correct, but you can only delete the specified user from the last one, like this:
Users can only delete provisions from the last one, in front of the button is disabled.
code show as below:
// 按钮禁用
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");
}
}
// executed after a user deletes an element which lines of code.
UpdateButtonDisabled ($ ( "# the Participate the Button: the contains ( 'delete')"));
Although this order id or name, but the user may make unpleasant, if the user wants to delete which is very headstrong delete what does?
In case the user wants to delete the first one it would not have to delete all the finish is very user-friendly, so with the second method:?? Selector + traversal.
Selector + traversal methods do not care about the user's input process, only need to know the final result.
Direct look at the code:
HTML part:
<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;">Age </ TH > < TH style = "width: 100px;" > title </ TH > < TH > ID No. </ TH > < TH > affiliation </ TH > < TH > operation </ 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=""></the Option > < the Option value = "primary" > primary </ the Option > < the Option value = "middle" > intermediate </ the Option > < the Option value = "subtropical high" > Deputy High </ the Option > < the Option value = "Advanced" > advanced </ the Option > </ the 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</Primary value = "middle" > intermediate </ the Option > < the Option value = "subtropical high" > Deputy High </ the Option > < the Option value = "advanced" > Advanced </ the Option > </ the SELECT > </ TH > < TH > < iNPUT type = "text" ID = "the Participate-idcode1" placeholder = "enter" 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);">>the Button</ Delete </th> </tr> </tbody></table>
js part:
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 }
In this case no matter how users get the middle of the process, you can obtain the correct data ...