[帮助支持正在使用JSP和Jquery的项目。有一个问题,他们将输入框命名为数组,然后将表单序列化为JSON。问题是他们在表单上有一个删除按钮,并且在提交之前没有重命名输入框。 JAVA代码将其视为数组中的空行。有没有办法遍历这些元素并在Jquery中对其重命名(重编号)?
HTML
<c:forEach items="${assignmentRecords}" var="assignmentRecord" varStatus="status">
<tr <c:if test="${isTemplate!=0}">class="pte_row_markup"</c:if> id="${status.index }">
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner1">
<input type="hidden" name="assignmentSetGridList[${status.index}].asIndividuals" value="${fn:escapeXml(assignmentRecord.individual)}"/>
<input type="hidden" name="assignmentSetGridList[${status.index}].asIds" value="${assignmentRecord.id}"/>
<input type="hidden" name="assignmentSetGridList[${status.index}].asPrincipalIds" value="${assignmentRecord.principalId}"/>
<input type="hidden" name="assignmentSetGridList[${status.index}].asNames" value="${fn:escapeXml(assignmentRecord.name)}"/>
<span id="assignee@incrRowCnt">${fn:escapeXml(assignmentRecord.name)}</span>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner1">
<label style="display:none;" for="roleId@incrRowCnt">Role for ${assignmentRecord.name}</label>
<select id="roleId@incrRowCnt" name="assignmentSetGridList[${status.index}].asRole" size="1" >
<c:forEach var="item" items="${assignmentRoleList}">
<c:choose><c:when test="${item.value == assignmentRecord.role}">
<option value="${item.value}" selected="selected">${item.label}</option>
</c:when><c:otherwise>
<option value="${item.value}">${item.label}</option>
</c:otherwise></c:choose>
</c:forEach>
</select>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner1">
<label style="display:none;" for="taskTypeId@incrRowCnt">Task Type for ${assignmentRecord.name}</label>
<select id="taskTypeId@incrRowCnt" name="assignmentSetGridList[${status.index}].asTaskType" size="1" >
<c:choose><c:when test="${preferencesForm.typeIsAudit==false}">
<c:forEach var="item" items="${regAsgntTaskTypeList}">
<c:choose><c:when test="${item.value == assignmentRecord.taskType}">
<option value="${item.value}" selected="selected">${item.label}</option>
</c:when><c:otherwise>
<option value="${item.value}">${item.label}</option>
</c:otherwise></c:choose>
</c:forEach>
</c:when><c:otherwise>
<c:forEach var="item" items="${auditAsgstTypTaskTypMap[preferencesForm.asetName]}">
<c:choose><c:when test="${item.value == assignmentRecord.taskType}">
<option value="${item.value}" selected="selected">${item.label}</option>
</c:when><c:otherwise>
<option value="${item.value}">${item.label}</option>
</c:otherwise></c:choose>
</c:forEach>
</c:otherwise></c:choose>
</select>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner1">
<!-- <div class="datePickerDecorator"> -->
<div class="uef-input uef-date-enhanced pte_overwrite1" data-uefID="uef-in-dtPkr">
<label style="display:none;" for="dateDueId@incrRowCnt">Due Date for ${assignmentRecord.name}, format m m / d d / y y y y</label>
<input id="dateDueId@incrRowCnt" name="assignmentSetGridList[${status.index}].asDueDate" type="text" class="uef-datePicker"
autocomplete="off" value="${assignmentRecord.dueDate}"/>
</div>
<!-- </div> -->
</div>
<div id="pte_table_cell_inner2">
<p class="supportText" id=""><emac:message key="preferences.templates.edit.table.dateFormat"/></p>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner1">
<label style="display:none;" for="timeDueId@incrRowCnt">Time Due for ${assignmentRecord.name}</label>
<select id="timeDueId@incrRowCnt" name="assignmentSetGridList[${status.index}].asTimeDue" size="1" >
<option value="">--</option>
<c:forEach var="item" items="${timeDueList}">
<c:choose><c:when test="${item.value == assignmentRecord.time}">
<option value="${item.value}" selected="selected">${item.label}</option>
</c:when><c:otherwise>
<option value="${item.value}">${item.label}</option>
</c:otherwise></c:choose>
</c:forEach>
</select>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_cell_inner4">
<div class="spellCheckerDecorator">
<div class="uef-textArea uef-input pte_overwrite1" data-uefID="uef-in-txtArea@incrRowCnt">
<label style="display:none;" for="instructionsId@incrRowCnt">Instructions for ${assignmentRecord.name}</label>
<textarea id="instructionsId@incrRowCnt" name="assignmentSetGridList[${status.index}].asInstructions" rows="5" cols="40" maxlength="800"
class="charCounter" >${assignmentRecord.instructions}</textarea>
</div>
</div>
</div>
</div></td>
<td><div id="pte_table_cell_outer">
<div id="pte_table_bdcell_inner_actn">
<input type="submit" id="removeBtnId@incrRowCnt" class="overlay uef-btn pte_header_btn"
value='<emac:message key="preferences.templates.edit.table.remove.btn"/>'
onClick="return PteUtil.deleteThisAssigneeFromSet(this);"/>
</div>
</div></td>
</tr>
</c:forEach>
Jquery
deleteThisAssigneeFromSet : function(btn, remove) {
if( ! $(btn).parents('tr').hasClass('pte_row_markup') ) {
$(btn).parents('tr').remove();
}
}
是,您可以随时获取这些元素并更新其name
属性;查看内嵌评论。
deleteThisAssigneeFromSet : function(btn, remove) {
// Get the buttons' parent `tr` (I'd use `closest`, not `parents`)
var parent = $(btn).closest('tr');
if( ! parent.hasClass('pte_row_markup') ) {
// Get the row's siblings
var siblings = parent.siblings('tr');
// Remove the row
parent.remove();
// Update the inputs in the rows, row-by-row
siblings.each(function(i) {
var brackets = "[" + i + "]";
// Uses an "attribute starts with" selector to find the inputs
$(this).find("[name^=assignmentSetGridList]").each(function() {
this.name = this.name.replace(/\[\d+\]/, brackets);
});
});
}