質問編集履歴

1

送信部分のHTML追加しました。また、最初の画面の部分のコントローラー部分も追加しました。

2017/08/15 00:04

投稿

tomato_unagi
tomato_unagi

スコア20

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,80 @@
16
16
 
17
17
  ```java
18
18
 
19
+ @Controller
20
+
21
+ public class HelloController {
22
+
23
+ @RequestMapping(value = "/", method = RequestMethod.GET)
24
+
25
+ public ModelAndView index(Person personFormData) {
26
+
27
+ ModelAndView mav = new ModelAndView();
28
+
29
+ mav.setViewName("index");
30
+
31
+ List<Person> personList = new ArrayList<Person>();
32
+
33
+
34
+
35
+ Person personA = new Person();
36
+
37
+ personA.setName("A");
38
+
39
+ personA.setAge(33);
40
+
41
+ personA.setHobby("プログラミング");
42
+
43
+ personList.add(personA);
44
+
45
+
46
+
47
+ Person personB = new Person();
48
+
49
+ personB.setName("B");
50
+
51
+ personB.setAge(32);
52
+
53
+ personB.setHobby("書道");
54
+
55
+ personList.add(personB);
56
+
57
+
58
+
59
+ Person personC = new Person();
60
+
61
+ personC.setName("C");
62
+
63
+ personC.setAge(20);
64
+
65
+ personC.setHobby("トマト栽培");
66
+
67
+ personList.add(personC);
68
+
69
+
70
+
71
+ mav.addObject("personList", personList);
72
+
73
+
74
+
75
+ //フォーム上で扱うデータはpersonのリストではなくひとつのPersonFormと考える。
76
+
77
+ PersonForm personFrom = new PersonForm();
78
+
79
+ personFrom.setPersonList(personList);
80
+
81
+ mav.addObject("personFormData", personFrom);
82
+
83
+
84
+
85
+ return mav;
86
+
87
+ }
88
+
89
+ _____________________________________________
90
+
91
+
92
+
19
93
  @RequestMapping(value = "/confirm", method = RequestMethod.POST)
20
94
 
21
95
  public String confirm(@ModelAttribute PersonForm personFormData, Model model){
@@ -105,3 +179,97 @@
105
179
  </html>
106
180
 
107
181
  ```
182
+
183
+ 送信部のHTML
184
+
185
+ ```HTML
186
+
187
+ <!DOCTYPE HTML>
188
+
189
+ <html xmlns:th="http://www.thymeleaf.org">
190
+
191
+ <head>
192
+
193
+ <title>Top page</title>
194
+
195
+ <meta http-equiv="Content-Type"
196
+
197
+ content="text/html;charset=UTF-8"/>
198
+
199
+ <style>
200
+
201
+ body { font-size:13pt; color:gray; margin:5px 25px; }
202
+
203
+ pre { font-size:13pt; color:gray; padding:5px 10px; border:1px; solid gray; }
204
+
205
+ </style>
206
+
207
+ </head>
208
+
209
+ <body>
210
+
211
+ <form th:action="@{/confirm}" th:object="${personFormData}" method="post">
212
+
213
+ <table id="personList">
214
+
215
+ <tr>
216
+
217
+ <th>NAME</th>
218
+
219
+ <th>AGE</th>
220
+
221
+ <th>HOBBY</th>
222
+
223
+ </tr>
224
+
225
+ <tr th:each="tmpPerson, stat : *{personList}">
226
+
227
+ <td th:text="${tmpPerson.name}"></td>
228
+
229
+ <td th:text="${tmpPerson.age}"></td>
230
+
231
+ <!-- __${stat.index}__ ←プリプロセッシング -->
232
+
233
+ <td><input type="text" class="form-control" th:value="${tmpPerson.hobby}" th:field="*{personList[__${stat.index}__].hobby}" /></td>
234
+
235
+ </tr>
236
+
237
+ </table>
238
+
239
+ <button type="button" id="addrow" onclick="addList();">+</button>
240
+
241
+ <button type="submit" id="confirm" >confirm</button>
242
+
243
+ </form>
244
+
245
+ </body>
246
+
247
+ <!-- <script>
248
+
249
+ function addList(){
250
+
251
+ var t=document.querySelector("#personList");
252
+
253
+ var row1 = t.insertRow(-1); // 行を追加
254
+
255
+ var cell1 = row1.insertCell(0); // 一つ目のセルを追加
256
+
257
+ var cell2 = row1.insertCell(1); // 二つ目のセルを追加
258
+
259
+ var cell3 = row1.insertCell(2); // 三つ目のセルを追加
260
+
261
+ var input = '<input type="text" class="form-control/}'
262
+
263
+ cell1.innerHTML = input;
264
+
265
+ cell2.innerHTML = input;
266
+
267
+ cell3.innerHTML = input;
268
+
269
+ }
270
+
271
+ </script> -->
272
+
273
+ </html>
274
+
275
+ ```