*編集:リストを使用する必要があるかもしれませんが、同じ原則が適用されます。
@ModelAttributeアノテーションを使用して配列をフォームにバインドしようとしています。テーブルには配列の内容が入力されます(配列の各要素はテーブルの行に対応します)。配列にはデータが入力されている場合もあれば、バインド時に空の場合もあります。ユーザーはテーブルに行を追加できます(配列に要素を追加する必要があります)。
私の質問は、配列を渡す前に要素がすでに定義されている場合、どのように要素を配列に追加できるかということです。フォームが送信されると、これは自動的に発生しますか?
<body>
<h1>Members</h1>
<form:form action="configure" modelAttribute="members" method="post" id="member-form">
<table id="member-table" class="table">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody id="member-table-body">
<c:forEach items="${members}" var="member" varStatus="i" begin="0" >
<tr class="member">
<td><form:input path="members[${i.index}].name" id="name${i.index}" /></td>
<td><a href="#" class="remove">Remove</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Save" id="submit" />
<a href="#" id="add">Add Member</a>
<a href="?f=">Reset List</a>
</form:form>
</body>
__
$(document).ready(function(){
$('#add').click(function(e) {
e.preventDefault();
//Add a member
//Get the number of rows that are in the table
var memberTable = $('#member-table-body');
var numRows = memberTable.children('tr').length
//Add row to the table.
// memberTable.innerHTML(
return false;
});
$('.remove').on('click', function(e) {
e.preventDefault();
$(this).parent().parent().remove();
return false;
});
}); </ p>