我有一个有几行的表。行是动态创建的,并已从javascript中删除。因此,删除按钮确实可以。
$("#TaskTableBody").on('click','.removeSchedule',function(){
$(this).closest("tr").remove();
});
因此,我有一个提交按钮,可用于将表单对象重定向到服务器上的验证。
问题是,当我删除行时,ui可以正常工作,但发送到验证的对象具有已删除的所有行,都带有空值。
$("#validatePlan").click(function(e){
e.preventDefault();
var ScheduleForm=$("#form2").serializeArray();
sessionStorage.setItem("schedForm",JSON.stringify(ScheduleForm));
sessionStorage.setItem("flag","set");
$("#form2").attr('action',"/TaskSchedulePlanValidation/");
$("#form2").submit();
});
我将表单存储到sessionStorage中,以便在验证后重新加载它。重新加载工作正常,并且不会显示以前已删除的具有空值的行,但是Submit对象仍然具有这些行。
html部分是:
<form th:action="@{/saveSchedule/}" th:object="${plan}" id="form2" method="post">
<div >
<div >
<h3 class="plan-header"> Schedule Table</h3>
<button type="submit" th:formaction="@{/TaskSchedulePlanValidation/" form="form2" id="validatePlan">
<span class="glyphicon glyphicon-list-alt"> Validate Plan</span>
</button>
</div>
<div id="planDiv">
<table id="planTable" class="pre-scrollable">
<thead>
<tr>
<th>Planned Date</th>
<th>Planned Quantity</th>
<th><button type="button" class="btn btn-success btn-circle-sm" id="addRow"><span class="glyphicon glyphicon-plus"></span></button></th>
<th>Completed Quantity</th>
</tr>
</thead>
<tbody id="scheduledTaskTableBody">
<tr th:each="schedule, iter : ${TaskPlan.ScheduleList}">
<td class="ScheduledPlannedDate"><input type="text" class="datepickerSchedule ScheduledPlannedDateInput" th:name="ScheduleList[__${iter.index}__].plannedDate" th:value="${schedule.plannedDate}"></td>
<td class="ScheduledQty"><input type="number" class="ScheduledTaskQtyInput" th:name="ScheduleList[__${iter.index}__].plannedQty" min="0" step="0.1" th:value="${#numbers.formatDecimal(schedule.plannedQty,1,'COMMA',1,'POINT')}"></td>
<td><button type="button" class="removeSchedule btn btn-danger btn-circle-sm"><span class=" glyphicon glyphicon-remove"></span></button></td>
<td class="ScheduledCompletedQuantity"><input type="number" class="scheduledTaskInput ScheduledTaskCompletedQuantity ScheduledTaskCompletedQtyInput" th:name="ScheduleList[__${iter.index}__].completedQty" min="0" step="0.1" th:value="${#numbers.formatDecimal(schedule.completedQty,1,1,'POINT')}"></td>
</tr>
</tbody>
</table>
</div>
<div class="submitClearButtonsForm2Div">
<button type="submit" class="btn btn-success" id="SubmitScheduleDistButton" form="form2"><i>Submit</i></button>
<button type="reset" class="btn btn-danger" id="ClearScheduleDistButton" form="form2"><i>Clear</i></button>
</div>
</div>
</form>
我可以说form.serialiseArray()给出了正确的行列表,但是正常的提交具有所有内容(我是指已删除的行,并且该行内的对象设置为null)